Best Stacks For Web Development

Last Updated on: July 10, 2020

Ever since ‘Internet’ was invented in the year 1990, followed by the birth of a sophisticated client and server side programming language ‘Java’ in 1995, a whole new dimension of sharing knowledge emerged in the space of Information Technology via websites (both static and dynamic ones). With this, a new term ‘Web-Development’ coined itself which has become the top most role that software engineers choose today (according to stack overflow’s 2017 developer survey) as their career in the field of Information Technology.

I recently came across a question from a peer in the organisation – “what are the top web development stacks and how do we decide the right stack for the problem in hand?” I wanted to redirect the question towards internet, so I started looking for a decent guide that could help in answering this question. Unfortunately, I couldn’t come across a single writeup that answered the different facets related to this question. This was the motivation behind coming up with a definitive guide here that lists some of the key concepts of web development and the tools and technologies available today to achieve the goal of a scalable web application.

Before you start reading any further, please bear in mind this article is not about a list of ‘hottest languages or tech stacks’ for web application development throwing a cluster of buzzwords at you, rather this is a practical review of the trends in the industry backed up by statistics from various online sources and in-depth research mixed with years of experience working in the field of web applications.

While I agree with the entire description provided by Wikipedia, the most important part to me was the closing line in the above para. As a web professional the first thing that we need to understand is the composition of a typical web application –

Front-end

This is the interface that a developer creates for interaction with the main application. This can be as simple as a static web page designed in HTML or a complex implementation done using a technology based on virtual dom (such as React.js) for browsers or a mobile application developed natively using android and iOS technologies or a hybrid platform such as React Native.

Back-end

This refers to the server side master program running on single or distributed topology and responsible for catering to the stateful and stateless requests sent from the front-end. There is a huge spectrum of technologies available currently to write the back-end implementation of a web application, we will be reviewing some of those in the sections to come.

Datastore

This is the organised collection of information that the front-end usually demands on from the back-end. The datastore (a.k.a. database) contains every persistent information that is useful in the present date as well in future to come up with a custom metrics based on the data gathered over a given period of time. There are two primary divisions in terms of the ways to store the data and those are:

• SQL database and
• NoSQL database

Cloud Hosting Service

This is the information technology (IT) paradigm that enables ubiquitous access to shared pools of configurable system resources and higher-level services that can be rapidly provisioned with minimal management effort, often over the Internet. Cloud computing relies on sharing of resources to achieve coherence and economies of scale, similar to a public utility. The idea in general is to take the complexities of setting decent hardware for deploying the web applications to another level by abstracting the details from routine back-end dev and letting domain experts like AWS and Azure take care of these. This not just reduces the overall cost, it also makes the application secure in a lot of sense by applying default security configurations while deploying the applications. The time it takes to spin a new server on cloud hosting services is close to minutes as compared to hours, if you do the same task in house.

Front-end Technologies

As mentioned earlier, the front-end of a web application is the part that end users interact with to gain information of the system or to share their thoughts.

There are two best stacks for web development that I would like to present to the reader in the context of front-end development in current scenario –

React.js

React.js is a front-end library based on JavaScript and built and maintained by Facebook. It abstracts away the DOM from you, giving a simpler programming model and better performance. React can also render on the server using Node.js, and it can power native mobile apps using React Native. The core objective of this library is providing the best possible rendering performance and it draws its strength from individual components instead of focusing on the entire web app at once.

Even though Angular has been in existence for a substantial time, it never came across as something that is easy to use and maintain and the fact that it has gone through major revisions in last two years has rendered the initial knowledge on the technology pretty much useless. Also, Google (founders of Angular) didn’t do a lot of justice with Angular by using closure-library instead of promoting Angular in their top notch public facing applications (including but not limited to Gmail). React on the other hand is not only maintained by Facebook, also it is used heavily by them. PayPal, Uber, Instagram, and Airbnb are just some names in the list of React admirers along with close to 95,000 live websites based on React.

Vue.js

The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Vue.js is one of those new software technologies that is being widely used across the world for web development. Vue.js is actually a JavaScript framework with various optional tools for building user interfaces. There are numerous advantages of using Vue in web frontend development –

• It’s small size
  The size of this framework is 18–21KB and it takes no time for the user to download and use it. This does not mean that it has low speed because of small size. Instead, it beats all the bulky frameworks like React.js, Angular.js, and Ember.js.
• It’s simply easy
  Personally I am a big fan of Vue, even without a proper front-end development experience I was able to learn and adapt Vue in daily development tasks in less than two weeks.
• Vue’s documentation is admirable
  Even though it is not backed up by multi billion dollar organisations such as Google or FB, it still has managed to evolve in a very short span of time and has ensured that the updates are not as problematic to absorb as has been the case with some of its competitors.
• Offers a great deal of flexibility
  It allows the user to write their template in HTML file, JavaScript file, and pure JavaScript file using virtual nodes. This flexibility also makes it easy to understand for React, Angular or any other JS developers.

Vue or React- Which of These Makes the Best Stacks For Web Development?

Here is a result of a recent survey that was conducted online to assess the percentage of front-end developers who would like to reuse their past frameworks/libraries for UI development.

No surprises, the top two contenders are React and Vue. This itself speaks a lot about the comfort and faith that these two technologies have now gained over their competitors. Another important consideration is the speed of DOM rendering. If we were to consider vanilla JavaScript
as the fastest mode of component rendering, Vue 2.0 is only 1.37 times slower as compared to 1.82 times slow React 15.3 and 1.85 times slower Angular 2.0.If you are still looking for some more guidelines on choosing one over the other, here are a few important points to consider –

Vue has the following advantages over React:

• it is smaller and faster
• convenient templates simplify the process of developing
• it is simpler in terms of syntax
• 92,500+ Github Stars and 189 contributors

React has the following advantages over Vue:

• gives more flexibility in large apps developing
• easier to test
• suitable for mobile apps creating
• more information and solutions available
• 94,500+ Github Stars and 1177 contributors

Back-end Technologies
The back-end stack, comprises of three important layers –

• Server-side software (application server/web server)
• A set of APIs to collect and serve data
• Database to store and return data as requested by APIs

The server is a powerful hardware (physical or virtual) that runs in the back-end software and database. It’s primary job is to serve or collect data via Application Programming Interfaces (a.k.a. API). The front-end applications, be it browser based thick clients or native/hybrid mobile applications, connects with the server by invoking one of the many live APIs on the server and GET or POST the data which is eventually stored in the database. APIs play an integral role in how most server-side software architectures are built, oftentimes replacing more complicated programming to allow software to communicate and data to be transferred.

The intricacies of the back-end stack are beyond the scope of this article and the next section focuses on some of the most promising server side technologies/frameworks which are available as options to the back-end developer today –

Node.js

Node.js was first conceived in 2009 by Ryan Dahl and he continued to develop and maintain it till it got sponsored and supported by Joyent. Dahl was not happy with the way Apache Http server used to handle the lot of concurrent connections and the way code was being created which either blocked the entire process or implied multiple execution stacks in the case of simultaneous connections. This lead him to create a Node.js project, he used Google’s V8 JavaScript engine, an event loop, and a low-level I/O API in his project which won him a standing ovation.

Node JS Platform does not follow Request/Response Multi-Threaded Stateless Model. It follows Single Threaded with Event Loop Model. Node JS Processing model is mainly based on Javascript Event based model with Javascript callback mechanism. Node.js comprises of two main component core & its modules. Core: built in C & C++. It combines Google V8 JS engine with Node’s Libuv library and protocol bindings including sockets & Http.

Node.js is especially good for developing real-time apps intended for simultaneous connection of multiple users. However, it is not recommended for apps intended for complex computations. Some of the big names you know— Netflix, Trello, PayPal, LinkedIn, Walmart, Uber, Groupon, eBay, NASA—all use Node.js for their apps.
Some of the typical use cases of Node.js can be listed as follows –

• I/O bound Applications
• Data Streaming Applications
• Data Intensive Real-time Applications (DIRT)
• JSON APIs based Applications
• Single Page Applications

Some of the most promising frameworks built on top of Node.js are –

Meteor	Star 39,763+
Express.js	Star 38,214+
Koa.js	Star 21,134+
Sails.js	Star 18,978+
Hapi.js	Star 9,400+

Python

Python is one of the best stacks for web development. It is one of those rare languages which can claim to be both simple and powerful. You will find yourself pleasantly surprised to see how easy it is to concentrate on the solution rather than the syntax and structure of the language. Websites built in Python include the likes of Google, Yahoo Maps, Dropbox, Venmo, YouTube, Instagram, Spotify, Reddit, and BitTorrent. Blender 3D, Unity 3D, and Mercurial are some of the well known softwares written in Python. Some of the important features of Python language are –

• Its is a simple and minimalistic language
  Reading a good Python program feels almost like reading English, although very strict English! This pseudo-code nature of Python is one of its greatest strengths. It allows you to concentrate on the solution to the problem rather than the language itself.
• Python is an example of a FLOSS (Free/Libré and Open Source Software)
  In simple terms, you can freely distribute copies of this software, read its source code, make changes to it, and use pieces of it in new free programs.
• It’s a high level language
  When you write programs in Python, you never need to bother about the low-level details such as managing the memory used by your program, etc.
• Python supports procedure-oriented programming as well as object-oriented programming.

Typical use cases for using Python language –

• APIs based development
• Data-heavy sites, servers with high-traffic volume
• Academic and scientific programming. Python has a slew of libraries for data work.
• Machine learning
• Data scientists use Python for prototypes and data analysis

Server side Frameworks built on Python –

Django	Star 33,782+
Flask	Star 35,653+
Tornado	Star 15,737+

Java

Java is a general-purpose computer-programming language that is concurrent, class-based, object-oriented, and specifically designed to have as few implementation dependencies as possible. There were five primary goals while creating Java:

1. It must be “simple, object-oriented, and familiar”.
2. It must be “robust and secure”.
3. It must be “architecture-neutral and portable”.
4. It must execute with “high performance”.
5. It must be “interpreted, threaded, and dynamic”.

The key factor contributing to Java’s success lies in the output of a Java compiler, which is not a executable code. Rather, it is bytecode. Bytecode is a highly optimized set of instructions designed to be executed by the Java run-time system, which is called the Java Virtual Machine (JVM). While Java serves as a great client side programming language, it also is one of the most popular server side choice of language and does power some of the biggest corporate banks and industries such as aviation and communication.

Typical use cases for Java language usage is as follows-

• Multi threaded systems
• Heavy computation
• Machine learning
• Transaction based systems
• Real time communication

Even though J2EE has been in existence for roughly the same amount of time as Java, the Servlet and JSP concepts have remained fairly stable over these years. There have been numerous server side frameworks (MVC and non MVC) written on top of the Servlet specifications given by J2EE, most dominant and prevalent amongst them being Spring.

Most widely used server side frameworks based on Java –

Spring Framework	Star 20,955
Spring Boot	Star 24,369
Vaadin	Star 1,351+
Grails	Star 2,317+
JSF
Struts

Ruby

Ruby is a language of careful balance. Its creator, Yukihiro “Matz” Matsumoto, blended parts of his favorite languages (Perl, Smalltalk, Eiffel, Ada, and Lisp) to form a new language that balanced functional programming with imperative programming. Since its public release in 1995, Ruby has drawn devoted coders worldwide. In 2006, Ruby achieved mass acceptance with active user groups in the world’s major cities and Ruby-related conferences filled to capacity.

As a dynamically typed language, Ruby does not have hard rules on how to build features, and it is very close to spoken languages. There’s more flexibility in solving problems using different methods. Furthermore, Ruby is also more forgiving of errors, so you’ll still be able to compile and run your program until you hit the problematic part. The emergence of Node.js in recent times has led to a seriously narrower Ruby (and RoR) developer community however it still is used widely for websites such as Hulu, Twitter, ZenDesk, Basecamp, Shopify, Urban Dictionary and GitHub.

It’s almost impossible to talk about Ruby without talking about Rails. In some ways, Rails has become Ruby. Part of this is because of the sheer popularity of the Rails framework. It’s a very popular framework that’s gotten a lot of use and Ruby has come to exist primarily as a service to the Rails framework. It is strongly opinionated, favoring convention over configuration which means unlike Ruby which believes there are many ways to do things, Rails thinks very strongly as far as web development is concerned that there is a best Rails way to do things. It allows you to fast prototyping and is popular with startups wanting to iterate quickly.

Typical use cases for Ruby –

• Web development
• Functional programming
• Getting complex, high-traffic sites and apps up and running quickly

Most widely used server side frameworks written in Ruby –

Ruby on Rails	Star 39,600+
Sinatra	Star 10,000+
Padrino	Star 3,100+
Nancy	Star 6,100+

Elixir

Elixir is a dynamic, functional language designed for building scalable and maintainable applications. Elixir leverages the Erlang VM, known for running low-latency, distributed and fault-tolerant systems, while also being successfully used in web development and the embedded software domain.

Erlang was made at Ericsson in the 1980s to allow for better development of telephony applications. If you use 4G data on your phone it is more likely than not that the data is going through equipment from Ericsson. And it runs Erlang. Whatsapp has hundreds of millions of users. On most other platforms, handling more than ten thousand concurrent connections on one machine is seen as challenging, but Whatsapp has individual servers with more than 2 million concurrent connections, handled by Erlang. Erlang is also popular for game servers. Millions of users play multiplayer games with game server infrastructure handled by Erlang for titles such as Call of Duty and Game of War.

With all these pros, Erlang suffers from some major drawbacks as well. It is not as easy to get up and running a new website, the Erlang syntax looks a bit strange if you are used to looking at languages such as C, Java, JavaScript, PHP, Ruby, Perl etc. And things like package management, build tools, meta-programming, unicode handling and web frameworks are not as straightforward as in languages such as Ruby.

These areas are all addressed in Elixir. Elixir creator José Valim said: “I liked everything I saw in Erlang, but I hated the things that I didn’t see”. Elixir has its own package management system, macros, an easy to use build tool and unicode handling. The difference between Erlang and Elixir is not just the syntax. But syntax does matter, and especially for Ruby developers the Elixir syntax is very familiar.

Typical use cases for using Elixir –

• Writing highly concurrent web applications
• A text chat server that can handle 100-1000000 simultaneous connections per computer
• A telecommunications gateway able to support 1000’s of phones
• Software licensing and inventory system
• Wireshark export parsers
• Connecting IoT devices

Most widely used frameworks written in Elixir –

Phoenix Framework – Web and APIs	Star 11,750
Nerves – IoT & Embedded Software	Star 822
Sugar – Web Framework	Star 2,500
Hedwig – Bot Creation Frameworks	Star 455

Hopefully the introductory explanation of these server side technologies will give you a head start towards thinking in terms of back-end development. The choice of either of these technologies for web application development purely depends on the kind of experience you as a programmer have and if you are an entrepreneur, then it depends to an extent on the capabilities of your existing team and their comfort with object oriented vs procedure oriented languages.

At times, it’s a little difficult to join the league of functional programming specially if you started your career as an object oriented language fanatic, however while evaluating certain technology or programming methodology we should always take the factors such as ease of writing code, being opinionated, time to take application live on internet etc in mind. Even if it takes a few extra days or weeks to learn a new language, to me it makes all the sense as it saves a lot more effort in the future when the application goes online.

Along with the choice of server side technology, another very important part of web application development these days is choice of cloud for deployment of the application. There are many available options in the tech industry today –

• AWS
• Azure
• Google Cloud
• Oracle Cloud
• Digital Ocean

The choice amongst these boils down to the following factors –

• Cost of service
• Certifications & Standards
• Technologies & Service Roadmap
• Data Security, Data Governance and Business policies
• Service Dependencies & Partnerships
• Contracts, Commercials & SLAs
• Reliability & Performance
• Migration Support, Vendor Lock in & Exit Planning
• Business health & Company profile

While cost should never be the single or most important factor, there’s no denying that cost will play a big role in deciding which cloud service provider you choose. In my personal experience AWS has been the best choice in terms of all the factors mentioned above as well as the cost of individual services. It has reliable data centers across the globe and it keeps on adding new and relevant cloud hosting solutions every year, to me AWS has been an industry leader and a trend setter and others are mostly following everything that AWS comes up with.

With these thoughts on the best stacks for web development, I would like to conclude this article hoping that it was a value addition to new web application developers as well as to the experienced campaigners. This is just the first article in the series of articles to come detailing different aspects of technologies mentioned here. Thanks for reading it through and looking forward to your views.