Last month, I was in Bangalore for a 3 day training on GraphQL, Relay and Redux. This client had been talking to me about these topics for a long time, but the participants had to be geared up with the essential pre-requisites for these topics. Most of them in my opinion were (and hopefully, still are, even after my training!!!) kick-ass full-stack developers. They have been working in ReactJS for quite sometime, with most of them being trained by me before.
I usually like to call my training as coding workshops. You establish the basic premise and push them into a coding environment, half the job is over. People are smart to monkey(yes, that's very important when you learn!) around with code, trying out new stuff and discussing a lot.
Day01
We spent the first 30 minutes warming up with those topics in ES2017 that would make you comfortable working with the topics.
- Arrow functions
- Object Destructuring
- Rest and Spread
- Template Strings
I plan to create a 5-minute video on each of these topics in the coming weeks. Things are always easy, if you understand the basics of a language very well.
We discussed Redux framework for the rest of the day. Redux is a simple library that focusses on externalizing the state and behaviour in React applications. The flow of data in Redux is like this
[Component] -> [Action] -> [Store] -> [Reducers]The important point to keep in mind is immutable state. Every action results in a new state. We create a new copy of the existing state and modify the essentials for 'that' Action and return it. Let's not forget the importance of using Object.assign to create a copy of an object. Redux was well received as it had very obvious advantages.
Day02
Enter GraphQL. As a library, GraphQL is easy, but it tests the training skills. Almost all the articles or videos on GraphQL I have gone through, take so much pride in introducing it as a complex library. They discuss Facebook's data needs and how it came up with GraphQL to solve it's problems. Sounds fantastic, but too complicated for a beginner. So, I had made up my mind not to talk about the Facebook example in the class. Facebook is a complex application with large volumes of data exchanged every second, but our projects may not have the requirements of the same magnitude.
We began our discussions on the problems with RESTful services and challenges in a multi-device accessing of application. The problems slowly lead to the need for GraphQL. I think the introduction to GraphQL was very well received, because most of the folks told me about the same set of problems they were facing in their existing applications. Most importantly people were relieved to find out that it had nothing to do with Graph databases :) We learnt the basics of GraphQL without a server. Yes, you read it right. We don't need a GraphQL server to learn the basics. One we got accustomed to the core syntax, we built a server using NodeJS and used GraphiQL for playing with queries, mutations and fragments. We wrapped up the day building a Redux application that talked to a GraphQL server for data. We used axios to pass on the queries. Overall the day was very productive. When somebody quips after a session, 'Is that all?', I have begun to believe that the mission is accomplished :)
Day03
We discussed Relay and Apollo. Relay is a library from Facebook used in React applications and to execute the GraphQL queries. It provides a lot of facilities like caching, optimising server calls, pagination etc., to make the React applications better. Where it suffers is, the lack of good documentation. The Relay Modern documentation gives very minimal information on every feature. A Relay developer can get really frustrated because of that. Setting up Relay is a bit tedious, thanks to the Relay compiler. Relay compiler transpiles GraphQL queries, which is really cool. Here're the steps involved in setting up Relay.
- create-react-app relay-app
- Navigate to relay-app
- sudo yarn add react-relay graphql
- sudo yarn add --dev babel-plugin-relay
- yarn eject
- sudo yarn add --dev relay-compiler
- Add "plugins": [ "relay" ] to "babel" in package.json
- Add "relay": "relay-compiler --src ./src --schema ./schema.graphql" to scripts
- Create a file schema.graphql and copy your GraphQL schema
- Run sudo yarn relay after every change to GraphQL query in your code
We discussed QueryRenderer, FragmentContainer and touched upon PaginationContainer. Apollo is a lot more easier to work with, compared to Relay and the main reason being ease of use and the documentation. Apollo doesn't have a GraphQL compiler so setting it up is trivial. And the documentation is pretty good. Apollo client 2.0 doesn't use redux store internally, like 1.0. Towards the end of the class, there were lot of discussions on the permutations of using Redux with Apollo, Redux, Relay and GraphQL, AngularJS, Apollo and GraphQL and so on.
Relay made me wind up the class with a tweet, that I saw in Thomas Fuchs' timeline. :)
