Hello there, How is it going?
Welcome to 8bitmen.com

This article is a comprehensive write-up on How to pick the front end technology for your app? It lists down different use cases with related technologies & the relevant reads on them.

In the article, I also discuss if we should go for JS frameworks like React, Angular, Vue, go through their learning curve or are we better off without them. When & when not should we use JS Frameworks?

For all the articles in the pick the right tech stack series navigate here

So, without any further ado.
Let’s get on with it.

 

1. USE CASE

I Need to Create A Web Page With Just Some Basic Text Information. How Do I Structure My Web Page?

You need HTML to create a web page. HTML is the language of the web. It is used to display the content on the web. Every single page on the websites we visit on the world wide web is written using HTML.

 

2. USE CASE

Alright, So I’ve Created A Web Page With Some Basic Information. Now I Need to Add Some Style to It Such As Colour, Alter the Text, Font Size Etc. How Do I Change the Look & Feel Of the Web Page?

You need CSS to work on the styling of your web page. CSS stands for cascading style sheets. It is a style sheet language which takes care of the look & feel of a web page coded in HTML.

 

3. USE CASE

So, Now I Have A Web Page, Added Some Style To It. I Need To Make It A Little Interactive. Maybe Show/Hide A Section On the Click Of A Button. How Do I Do That?

We need JavaScript to do that. JavaScript is a scripting & a programming language that enables us to implement complex stuff on our webpages such as animations, user notifications, interactive forms, maps etc.

 

4. USE CASE

I Need To Make Sure That My Website Displays Fine In Different Browser Sizes Be It A Mobile, A Desktop Or A Tablet Browser. How Do I Do That?

To achieve that we need a responsive design for our web page. Responsive web design averts the need for creating separate web pages for different screen sizes. The web page automatically adjusts itself with the changing screen sizes. The page design consists of flexible grids, layout & CSS media queries.

Consumer market today has largely moved to the hand-held devices & our business cannot do without having a mobile presence. Our website design should be intelligent enough to adapt to changing screen sizes.

Some Of the Popular Responsive Design Frameworks used in the Industry are:

Bootstrap JS

This is the most used mobile-first responsive CSS framework in the industry. The second most starred project on GitHub. It contains HTML, CSS design templates & JavaScript extensions. It makes things really easy to implement, even for someone who is not a front-end developer.

HTML5 Boilerplate
Similar to Bootstrap, this too is a responsive mobile ready CSS framework with HTML, CSS design templates.

Skeleton
A pretty simple boilerplate for making responsive websites & apps. Perfect for simple use cases.

 

5. USE CASE

I Need To Display Dynamic Information On My Web App Without Refreshing the Page Every Time. How Do I Do That?

We need AJAX for this. AJAX stands for Asynchronous JavaScript & XML. It enables the websites to display dynamic content asynchronously without reloading the page in the browser.

All the websites displaying data asynchronously, primarily use AJAX to achieve this desired site behaviour. AJAX is commonly used with the Jquery framework to implement the asynchronous behaviour on the UI.

The technique for fetching data asynchronously from the server via AJAX is also known as polling.

 

6. USE CASE
Do You Need to Stream Data In Real-time? Are You Writing An App Like Youtube Or Netflix?

Or Are You Writing An Online Game Which Has A Lot Of Reads, Writes?

Are you Live updating the UI, Like Updating the Scores In A Sports App? Do You Need to Implement A User Notification System?

To implement these kinds of scenarios the client needs to establish a persistent connection with the server. A Persistent connection is a connection which stays open for multiple HTTP requests & responses after the first exchange.

In a conventional request-response scenario, the connection between the client & server is closed after a single request-response cycle.

There Are Multiple Techniques & Tech Which Help Us Achieve this Such As –

Websockets

Long Polling

HTML5 Event source API & Server sent events

Streaming over HTTP

Every technique has a specific use case.

 

Web Sockets connection is ideally preferred when we need a persistent bi-directional data flow. From client to server & back. A typical use-case of this is messaging, chat applications.

Browser-based massive multiplayer games which have quite a number of read writes in comparison to a regular web app. With web sockets, we can keep the client-server connection open as long as we want.

Have bi-directional data? Go ahead with Web sockets. One more thing, web sockets tech doesn’t work over HTTP. It runs over TCP. The server & the client both should support web sockets else it won’t work.

 

Streaming Over HTTP is ideal for cases where we need to stream data on the web over HTTP. This is possible with HTML5. There exists a stream API for this too.

In this scenario, both the client & the server agree to conform to some streaming settings. This helps them know when the stream begins & ends over an HTTP request-response model. For more information go through the relevant reads down below.

 

Long Polling lies somewhere between Ajax & Web Sockets. In this technique instead of immediately returning the response, the server holds the response until it finds an update to be sent to the client.

The connection in long polling stays open a bit longer in comparison to polling. The server doesn’t return an empty response. The upside of using this technique is there are quite a smaller number of requests sent from the client to the server, in comparison to the regular polling technique. This reduces a lot of network bandwidth consumption.

Long polling can be used in simple asynchronous data fetch use cases. When you do not want to poll the server every now & then.

 

HTML5 Event source API & Server sent events

Server sent events implementation takes a different approach. Instead of the client polling for data, the server automatically pushes the data to the client whenever the updates are available.

This helps in getting rid of a huge number of blank request-response cycles cutting down the bandwidth consumption by notches.

To implement server-sent events, the backend language should support the technology & on the UI HTML5 Event source API is used to receive the data coming from the backend.

SSE is ideal for scenarios such as a real-time feed like that of Twitter, displaying stock quotes on the UI, real-time notifications etc.


Relevant Reads

An Introduction On WebSockets

Live streaming over HTTP

Dynamic adaptive streaming over HTTP

Streams API Mozilla Documentation

Server-sent events Mozilla doc

 

7. USE CASE
Do You Intend to Write A Single Page Application? Do You Need A Model View Controller Framework, Or Something Similar, On the UI?

Does Your App Has Complex Requirements, A Lot Of Components Which Need to Be Plugged In Together?

SPA Single page applications have the look & feel of native apps. Instead of the entire web-page being re-loaded, respective components get refreshed with data updates. The browser url doesn’t change it stays the same.

Also, there are instances when you require the business logic on the UI instead of the backend. Social apps, utility apps, games etc. Data flow is typically managed with an MVC framework on the UI.

Separate reusable components are written, just like Classes on the backend, which are plugged in together in a web page. There is a term for having the business logic on the UI called the Thick or the Fat client.

Some Of the Popular Frameworks Which Enable Us Manage Complex Requirements, Write Re-usable Components, Implement A Single Page App Architecture Are:

ReactJS
It is a JavaScript library for writing user interfaces for single page web & mobile applications. It is maintained by Facebook & a dedicated community of developers.

AngularJS
It is a JavaScript-based framework for writing UI for single page apps. It is maintained by Google & a community of developers.

VueJS
A JavaScript framework for building user interfaces & single page applications.

AureliaJS
This is a next-gen modern UI framework for writing web & mobile apps.

EmberJS
A popular framework for writing single page applications

ExtJS
A popular UI framework for writing cross-platform web apps

 

8. USE CASE

Does Your App Has Basic Requirements Like For Instance Having A Simple Form Accepting User Data? A Static Web-page? Booking Status Checking Tool? Etc.

There are scenarios when our requirements are really simple & we might not need heavy frameworks to write our business service.

Why spend time understanding new frameworks & stuff when things can easily be implemented with JavaScript & Jquery?

Jquery is a JavaScript library which focusses on simplifying HTML DOM traversal & manipulation, event-handling, CSS & animation.

And not just simple, even complex apps can be written using JavaScript. Have a look at the revealing module pattern for writing reusable components, just like React, using plain JavaScript.After all, every UI framework is written in JavaScript.

 

Do You really need a JS Framework or you are fine without it? Why use frameworks at all?

Most websites have similar requirements. Frameworks have features, commonly needed by web apps, pre-written, which we would have to write from scratch if it weren’t for these frameworks.

Besides, with open source frameworks, we can always tweak stuff as per our requirements.

Popular frameworks are production ready, battle-tested & maintained by big companies running their services on these frameworks. The solutions for the problems they come across on their platforms are incorporated in these frameworks continually. They are written with performance & best practices in mind.

As already stated, since we don’t write everything from scratch, use of frameworks expedites the development process. Open source frameworks have regular contributions & new plugins from the community so it’s always helpful to pick a framework than writing stuff from scratch unless we have very unique custom requirements.

On the flip side, when we have simple requirements like writing a simple form of accepting user data. Static web page, small web-based utilities etc. When we are sure that the features & stuff won’t grow at a rapid pace in future. We can do without frameworks.

New technologies do have a learning curve. Learning & implementing new stuff takes time. I personally have written so many UIs just with JavaScript & Jquery, it saved me a crazy amount of time.

It’s a trade-off. A decision which you have to make. Write stuff, everything from scratch or use a framework.

 

9. USE CASE

Do You Need to Run Simulations? Like Scientific Simulations & Visualizations? Do You Need to Do Video, Image Editing On the UI?

Live Video Augmentation? Building UI Which Tests Funny Moustaches On People’s Faces. Streaming Data? AR VR? Heavy Game Graphics?

For all the heavy lifting scenarios stated above, we need WebAssembly. It helps us achieve near-native performance in the browser.

WebAssembly enables us to run physics, scientific simulations. Building augmented reality-based apps. Running games with heavy graphics in the browser. Image recognition, CAD applications.

The technology leverages the hardware capabilities of the platform it runs upon.

 

10. USE CASE

Do You Intend to Build A Peer to Peer Web App Like YaCy, A P2P Distributed Search Engine? Or LiveStation, A P2P Live TV & Radio Service By Microsoft?

P2P peer to peer apps have no central server rather they are hosted by peers in the network, which make the apps automagically fast & scalable. Users instead of fetching data from a distant located corporation server now fetch data from the systems of other users, hosting content, located close to them geographically.

Also, when a user logs into a P2P app, he acts as both the leecher (one who fetches data) & the peer (one who hosts or uploads data to the network). Data can be hosted by the user either temporarily or for a longer period of time.

So, the underlying p2p architecture averts the need for writing a backend for a peer to peer web app. To get a deeper understanding of what P2P web apps are, how do they work? What is the underlying architecture? Do go through the relevant read resources below.

The Technologies Which Help Us Write A Peer to Peer Web App Are:

JavaScript
It is the programming language of the web. It helps us build interactive web pages & work with Html & CSS

DAT Protocol
It is a peer to peer protocol which enables us to write efficient P2P web apps via APIs & other features.

Freedom JS
A framework for building p2p web apps. Create social applications that easily work in modern web browsers

WebRTC
It stands for Web Real Time Communication. Allows browsers & mobile apps to communicate in real-time, with direct peer to peer communication, in the browser without the need for any plugins.

 

Relevant reads

What are peer to peer web apps & how do they work?

An in-depth understanding of peer to peer networks

Peer to peer social networks & federated architecture

YaCy, a peer to peer search engine

Netflix researching on Peer to peer technology for streaming

 

11. More On the Blog

How Long Does It Take to Learn JavaScript & Get A Freakin Job?

What is Amazon GameOn Everything You Should Know About It

The Ultimate Guide to Federated Architecture & Decentralized Social Networks

What Database Does Twitter Use? – A Deep Dive

Instagram Architecture – How Does It Store & Search Billions of Images

 

Well, Guys… This is pretty much it.
If you liked the article do let me know in the comments. Share your thoughts. Share it with your folks. If you think any particular use case is left out, do share your insights.

This doc is continually updated as the technology evolves.

For all the articles in the pick the right tech stack series navigate here

You can follow 8bitmen on social media, do subscribe to the browser notifications for updates on the new content on the blog.

I’ll see you in the next article
Until then…
Cheers

 

How to Pick the Right Database For Your App – Explained With Use Cases