2) WhatsApp Web Version
While the former is about future, the latter is about the present. I was running short of my caffeine kick last night. So tonight, after gulping down a cup of chai, I decided that I’ll pen down my findings about Whatsapp.
Update: Whatsapp has been trolled already on Hacker News
Browser: Chrome on Mac OS and Windows
Tools: Built-in Chrome Developer Tools (right-click-inspect-element)
Let’s have a look what’s under the hood.
- ReactJS: Whatsapp is now a facebook product and considering that it has frequently changing contents in the Chat Window, it can be assumed that they’d have used ReactJS as their MVC platform. ReactJS is best when you’ve a frequently changing UI like facebook. It helps you with comparing DOM mutations and making updates faster.
- Server: It needs to add a server that can take a lot of concurrent load and serve static contents very fast. It is also assumed that they’ll be using CDNs, Caching and what not – everything for the users, to save them from the waiting-time-inferno.
- Caching, Etags and Expiry: I expect them to set an expiry-header with large time and rely on versioning numbers instead to provide faster results.
- Long Polling vs Persistent connections Not sure which will win the bet. But as per current web trends, my buck goes with the latter.
Inspect, View Source and Console
I’m affected with UI Developer Subconscious Motor Reflexes. Everytime I see a website which appears fantastic (not necessarily good looking), I tend to right-click-inspect on it immediately without even questioning my motives of my consciousness. Anyways, what I foud under the hood is as follows:
- DOCTYPE Edge: The first-ever thing to notice in a source is its doctype. Definitely HTML5, it has to be.
- HTML5 Boilerplate: Second thing you’ll notice in the page are IE conditional comments. There were requests in GITHUB about removing them as IE10 has deprecated them, but they’re still lying around it seems.
- Polyfills Check: The root tag has a class with a large string of class names
- data-reactids: As suspected, they use ReactJS
- Underscore: The best utils library you can ask for.
- noscript: I did not dig deep into it. But I assume they use it for the fallbacks when JS is disabled in browsers
- Emoji Sprites: Alright, this has to be there. Otherwise, how do you expect the highly sensitive people to communicate those feels so frequently, or how do you expect the evil strangers to seem nice.
- You could have done it better. But who cares. Even Apple doesn’t seem to do it.
< script src=lib/moment-with-locales-2.8.4.min.js>< / script> < !-- window.moment -- > < script src=lib/bluebird-2.5.3.min.js> < / script> < !-- window.Promise -- > < script src=lib/underscore-1.7.0.min.js> < / script> < !-- window._ -- > < script src=lib/velocity-1.2.0.min.js> < / script> < !-- window.Velocity -- > < script src=lib/velocity-ui-5.0.min.js> < / script> < !-- window.Velocity -- > < script src=lib/react-with-addons-0.12.2.min.js> < / script> < !-- window.React -- >
- And this large [248KB] app.js file [app_5ce6d3b0a204ac9046e3e36f053e6515.js]. The large number is probably for versioning. Nice approach. I like it. I look forward to using this in near future.
max-age=0very disappointing. In fact, many of their resources do not have an explicit expiry header set. OK, I understand that their Page is still under development and it might be undergoing frequent updates, but what about Underscore? It is a library, isn’t it. You could cache it at least.
- Content-Encoding:gzip I forgot to think about it entirely. OK, you won. It is totally impressive.
- data uri: base64 encoded images Great at loading, but poor at caching.
- Google Web Fonts: The TypeWolf’s question still goes unanswered, but great that you chose to go with this.
- Punycode, Canvas to Blob: Really Interesting. I did not know there was a polyfill for cavas to blob. I’m yet to discover where did they use them. There are more – moment-with-locales, bluebird, velocity & velocity-ui, hmac-sha256, aes, end-to-end, phoneformat and qrcode-js.
- So, what’s our take: It’s a great website with few short-comings. There is still some improvement pending. But, hey, it is nevertheless a great start.
— part 2 – will write tomorrow —
Built With and GTMETRIX
The builtwith.com test shows that some of my assumptions and inferences from inspection were correct. And, gtmetrix shows the areas where they need improvement.
It opens up further details how this was built.