GraphQL

Recently I have been working on a node stack project as a full stack JavaScript developer, it’s a great experience because I’m working with talented developers. We use TypeScript on both backend and frontend which is great because I’m coming from a .NET background and couldn’t be happier; Well we have types for our JS code :) But sometimes TypeScript drives me crazy for example when working with existing React libraries there are no type declarations and a lot of TypeScript’s benefits disappear so we have to write our own .d.ts file but it is worth it :) On the backend we use GraphQL for our APIs, so in this post, I explain my observation about this technology.

What’s GraphQL?

GraphQL is a query language for any kind of API and can fulfil any queries across multiple databases. The main benefit of using it is that you can ask for exactly what you want and you will get the result and nothing else. In this case, clients describe what they want their data and shape of it. The good point is that requests are validated against so-called Schema, we create this schema on our server, it basically describes the functionality available to our clients, inside this schema, we define our type definitions:

type User {
    id: ID!
    firstName: String
    lastName: String
    age: Int
}

type Query {
    users: [User]
}

In the schema, we need a top-level type called Query. The server defines the queries it can accept. So, in this case, we’re saying we need to return a list of users, the result is an array of type User.

Resolvers

Now we need a Resolver to figure out what we get back when we call users query. Resolvers are basically some functions that respond to queries and mutations, they are the functions that give us the results from a query.

const root = {
  users: () => {
    return [
      { id: 1, firstName: "Sirwan", lastName: "Afifi", age: 29 },
      { id: 2, firstName: "User 2", lastName: "lastName2", age: 20 },
      { id: 3, firstName: "User 3", lastName: "lastName3", age: 20 },
      { id: 4, firstName: "User 4", lastName: "lastName4", age: 20 },
      { id: 5, firstName: "User 5", lastName: "lastName5", age: 20 },
      { id: 6, firstName: "User 6", lastName: "lastName6", age: 20 },
      { id: 7, firstName: "User 7", lastName: "lastName7", age: 20 },
      { id: 8, firstName: "User 8", lastName: "lastName8", age: 20 }
    ];
  }
};

Now we can query the users to get the result, the query gets parsed and executed against a data source on the server and the server sends back the result as JSON:

As you can see we have intellisense for our API. In fact, GraphQL is more like TypeScript for our API, by using it we have awesome static type analyze. In traditional REST we had many requests but with GraphQL we only have one single endpoint.

Mutation types

The query type is responsible for defining what will return when we call the query. With mutation type, we can mutate (change, create) data.

input UserInput {
    id: ID!
    firstName: String
    lastName: String
    age: Int
}

type Mutation {
    createUser(input: UserInput): User
}

The great point about a mutation is that we mutate something and we also ask for something in the result, that’s why we can specify a return type for a mutation, in this case, it’s User:

GraphQL is a convenient way for a client to communicate with the server, There is much more to talk about this technology so I will pick up again in my next article.

React Hooks

Hooks are a new feature that is coming up in React v16.7.0-alpha, it’s a really great feature, I am so excited about this new feature. The goal is to use all functionalities you can do in class components in functional style components, We heavily use functional components in our project so in order to use things like State we have two options: re-writing our component in a class component or simply use a great package called react-powerplug:

import * as React from "react";
import { State } from "react-powerplug";

const Example = () => {
  return (
    <State
      initial=8
    >
      {({ state, setState }) => (
        <div>
          <p>You clicked {state.count} times</p>
          <button onClick={() => setState({ count: state.count + 1 })}>
            Click me
          </button>
        </div>
      )}
    </State>
  );
};

export { Example };

This is really great, but we don’t need to have this anymore because one of the feature of Hooks in the new version of React is using state inside a functional component, so we’d some something like this to get the same result:

import { useState } from "react";
import * as React from "react";

export interface ReactHookProps {}

const ReactHook = (props: ReactHookProps) => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Hello From ReactHook Component</h1>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
};

export { ReactHook };

As you can see, by calling useState and passing a default value, it gives you two property one for get and the other for set. The interesting point about useState is that we can have multiple states inside the component:

const [person, setPerson] = useState({
  firstName: "Sirwan",
  lastName: "Afifi",
  age: 29
});

Working with state is just one of Hooks functionalities, I will try to blog about the other features too.

You can grab the working sample project from GitHub.

Happy coding :)

Shahriban - My first Hackathon project (Challenges, Lessons Learned)

Image courtesy of LiveH2H

As you probably know, Hackathon is an event that programmers, designers, entrepreneurs to get together for a short period of time to collaborate on a project. The cool part of this event is delivering tasks rapidly, In fact, it’s more like a Marathon for programmers. I have never participated in a hackathon before but I always wanted to give it a try because it is something I have been wanting to do for a long time. Several weeks ago I had the opportunity to participate in such event with my friends Sohail and Arash from Kurdsoftware group. By the way, the event was not supposed to be like a competitive sort of events, We just wanted to do something. In this blog post, I am going to share challenges we faced over the course of the event.

Challenge #1

The first challenge for us was picking a project to implement so we decided to brainstorm as many ideas as possible then we tried to write them down. At this point, we had a big picture of all potential ideas. At the end of the day we ended up to an interesting one, Shahriban; the idea was to implement a platform for reporting local issues in a city. it’s more like a collaborative culture, something a citizen should do but does not have to do, to make their community better. Our goal was to encourage citizens across our city to be involved in process of improving the city. You can read more about Shahriban here(English, Persian, Kurdish):

Challenge #2

The next challenge after choosing the project was the technical side of it, Since we have different types of skills, we were not sure what language/platform to use to implement the project. we decided to keep it simple and follow KISS principle and use something like Wordpress but the problem is that customizing Wordpress takes time and it’s not simple as it sounds. So at the end, we decided to implement it from scratch so we picked PHP for the backend and Vue.js for the frontend. Sohail and Arash worked on the backend and used php-crud-api; a single file PHP script that adds a REST API to a SQL database, So at this point we had a fully fledged RESTful API and the process went very smoothly, we had everything at our disposal quickly. On the frontend, I picked Vue.js because getting up and running with Vue.js is really simple. So I used Vue CLI to generate the project. Over the course of 2 hours we had everything in place:

Challenge #3

The last challenge was to implement an app, Since Telegram is the most popular instant messaging app in Iran, we decided to develop a bot to do the job for us. This was really great because we didn’t have to implement an app for Android, iOS:

By the way, there are some restrictions to access Telegram in Iran, Perhaps we should have developed a native app for both Android and iOS. But the problem is that at the time this was not possible for us because we didn’t have an app developer in our team, I have developed some native Android apps in the past but my main focus these days is on the web so I wasn’t able to do that. If you want to contribute and are interested in, or you know someone who is interested in please let us know.

Conclusion

The whole experience was really great, we learned a lot in the process and feel a lot more confident and prepared for future events. Also in addition to the experience, I think this is a best opportunity to have a little bit impact in our community.