Browsing: / Home
Shortlink

Modern JavaScript concepts you need to know – Object Destructuring

By Prabhu Sunderaraman on April 8, 2018 in

A number of JavaScript libraries these days, require strong understanding of the ES6 language. If you want to comfortably work with libraries like Redux, ReactJS, Relay, GraphQL it’s important to understand some of the latest concepts.

Here’s my series of articles with videos on the topics. The first topic is Object Destructuring, where we extract items from an object and assign to variables based on simple pattern matching. 

let person = {
	name: "Sam",
	age: 12,
	address: {
		city: "London"
	}
}
//Old style
// let name = person.name
// let age = person.age

//ES2017
let { name,age } = person
console.log(name,age);

let {n,a} = person
console.log(n,a);

let {address:{city}} = person
console.log(city);

You can watch the video here


Mixx Delicious Digg Facebook Twitter
Shortlink

On GraphQL, Relay, Redux class

By Prabhu Sunderaraman on April 4, 2018 in

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 trainings 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.
IMG-20180328-WA0013

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.
Screen Shot 2018-04-04 at 11.01.59 AM
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.
After Relay, I wound up the class with a tweet, that I saw in Thomas Fuchs’ timeline.
Screen Shot 2018-04-04 at 7.27.40 AM

Mixx Delicious Digg Facebook Twitter
Shortlink

Let’s make two services talk to each other using HTTP

By Prabhu Sunderaraman on March 20, 2018 in ,

There are a number of ways to make services or applications talk to each other. You can make one service access another service synchronously or asynchronously.

Usually two services can talk to each other each other using databases, or plain HTTP or using message queues. Message queues are used for asynchronous communication.

Here’s a short video that shows two services, one created using NodeJS and the other created using Ruby, Sinatra. NodeJS service uses axios HTTP library to access the Ruby Service.

The video contains background music only. :)


Mixx Delicious Digg Facebook Twitter
Shortlink

How relevant is JAVA after 22 years?

By Prabhu Sunderaraman on March 9, 2018 in , ,

I wrote my first Java program in 1999. After that switched over to .NET, then came back to Java, then moved on to JavaScript, Ruby and came back to Java with Spring Boot. It’s 22 years and Java is still around kicking it big time. No signs of slowing down and was wondering the current relevance of Java language in the age of Microservices, Polyglot programming and so on.

Watch this short video, where I discuss the relevance of Java, with some data points.

Mixx Delicious Digg Facebook Twitter
Shortlink

5 points to remember about Layered architectural pattern

By Prabhu Sunderaraman on March 1, 2018 in ,

One of the first software architectural styles that a programmer learns when she starts building an application is ‘Layered‘. Here’s my 2-minute video on some key points in it.

Mixx Delicious Digg Facebook Twitter