What makes your web app faster? (part 3, Client App)

If you are coming to this story directly, i’ll suggest to take a look at part 1 and part 2 of this series.

So, last time i left you saying,

“Not everything has to be done on server.”

We are living in a new age of web development, previously everything was done on server side (Rendering, routing etc). After introduction of AJAX, web development got a whole new way to create and manage user interaction. All the likes, adding comment does not needed a page refresh.

But without using a standard development pattern like MVC, it was getting hard to manage bigger and bigger applications.

Javascript Frameworks:

The Dawn Of Web Frameworks begins in 2009 when a guy at google started working on a js framework the made 18,000 lines of jquery code to 2,000 angularjs code (That app was google feedback).

The reason why they are so successful because:

1. The use a well proven app development pattern (MVC, MVVC, MV* etc).
2. Only load parts of web page that is changing (Single page application).
3. Reusing web components.
4. If you are using node js server you can user isomorphic javascript for a single codebase.
5. Takes care of your routing.

Leaders:

There are more than 100 frameworks in market, leaders are:

1. Angular
2. React
3. Vue
4. Meteor (we will be excluding this)
5. Backbone
6. Ember
7. Polymer

Here is a benchmark of these frameworks fighting for glory,

[## Javascript Frameworks Benchmarks

Duration for updating all 1000 rows of the table (with 5 warmup iterations).

stefankrause.net](http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html?source=post_page-----4ec0d4fde428----------------------)

I won't tell you to use a specific framework over other, you can look at the benchmarks and decide it for yourself.

So, now back to how you can boost your web app’s performance. Using a Javascript framework helps you from generating those heavy HTML pages on server but it also increase time for first meaningful paint.

The way our web app rendered is:

1. Get Container (simple page).
2. Load Javascript framework.
3. Load Controllers.
4. Get template (not in case of React).
5. Get api data.
6. Render template with data.

Which is even slower than older methods, just get HTML and BAMM first meaningful paint is here.

But it is still good because, everything that changes from here will be blazing fast and what can never be matched with traditional server pages.

But there is a solution for above problem → Server Side Rendering.

Server Side Rendering:

In server side rendering, web app’s are rendered as HTML from server and after serving that 1st page client apps kicks in and takes control of application from there. So, it is a mix of old methods with new technology.

Server side rendering also helps in keeping a single code base, you can achieve this with phantomJs (it has a npm module).

But i will suggest take one which handles server side rendering itself, this will boost your app performance big time.

Webpack:

Loading multiple javascript files surely takes more time than all file combined as one. Webpack helps you achieve that.

Javascript frameworks are big topic in itself, I will not going to explain you every one of them.

Choose one Choose Wisely:

1. One way to choose is, Just have a look at every frameworks homepage, go with the one loads faster.
2. If you are new to Javascript stay away from things you don't understand (means stay away from angular 2 or reactjs).
3. Some people also go for creating a minimal framework themself (They say they only needed that much, so why to include 50kb more).
4. Other way would be to get one which has everything you need.

Personally i would suggest to go for reactjs as they get new and shiny things first. (For now i am so much invested in angularjs, that i cannot leave it. But soon i will give vuejs a try).

OK, it time for another shower thought here:

“Be indistinguishable from native apps.”

Native apps always have a sweet spot in user’s heart, let's change that in next chapter → ** Browsers .**