What makes your web app faster? (part 3, Client App)
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.
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:
- The use a well proven app development pattern (MVC, MVVC, MV* etc).
- Only load parts of web page that is changing (Single page application).
- Reusing web components.
- Takes care of your routing.
There are more than 100 frameworks in market, leaders are:
Here is a benchmark of these frameworks fighting for glory,
Duration for updating all 1000 rows of the table (with 5 warmup iterations).
I won't tell you to use a specific framework over other, you can look at the benchmarks and decide it for yourself.
The way our web app rendered is:
- Get Container (simple page).
- Load Controllers.
- Get template (not in case of React).
- Get api data.
- 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.
Choose one Choose Wisely:
- One way to choose is, Just have a look at every frameworks homepage, go with the one loads faster.
- Some people also go for creating a minimal framework themself (They say they only needed that much, so why to include 50kb more).
- 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 .