Understanding Web Development Frameworks in 2018
The most important frontend libraries to know as a web developer
This article is part 4 of an 9-part series of articles.
Development frameworks are tools and libraries that other developers have created to either reach a particular technical goal or to make developing in a particular language easier. In recent years, there has been a rise in frontend frameworks targeting web development. These frameworks mostly have one goal in common: facilitate development. How they tackle this goal is what sets them apart. Take note that the frameworks discussed here are for web applications, and typically not simple websites. This means that they excel when there is lots of data that needs to be moved around.
In this article, we will cover the prominent frontend and backend frameworks used by web developers.
Frontend Frameworks
React
The most popular framework at the moment is Facebook’s React library. The goal of React is to help create user interfaces and to have “reactive” data — data that gets updated without needing to refresh or update the entire page. It does this by taking inspiration from animation libraries by having a sort-of “draw” function named render(), where it methodically checks each different piece of the application, and if it detects a change, it will update only that specific part that needs updating.
React has been the most popular frontend library for about 3 – 4 years now because of its developer experience and ability to scale for large production applications while maintaining performance. It led the way for using components to build web applications. It also introduced the concept of the Virtual DOM, which maintains a copy of your app in memory, allowing for a very fast way to check for changes.
Alongside React, you will also find React Native, another Facebook library developed specifically for using React to create native applications for iOS and Android. To achieve this, it allows the developer to write their code in React (and JSX) and, once completed, they can use the Native engine to export their application. This code is then converted to Java and Swift for Android and iOS respectively, and is outputted to apps in Android’s .apk and iOS’ .ipa filetype. Moreover, there’s another library built on top of React Native called Expo, which allows you to use and interact with the smartphone APIs such as the camera, gallery, and a myriad of sensors.
Vue.js
Another rising star in the frontend frameworks world is Vue.js, commonly referred to as Vue (pronounced “view”). In fact, Vue recently passed React in number of stars on GitHub. Vue is known to be easily understood, incredibly lightweight, and less opinionated than React . In essence, you can completely integrate Vue into your application and make it your own.
Vue offers much of the same development experience as React: a library built to facilitate the building of user interfaces. Vue itself comes with much less than React does initially, but this functionality can quickly be added into a Vue app with officially supported packages. It also offers its own HTML templating solution, but you as a developer can swap that out in favor of another options, such as JSX. The style of writing Vue apps, when compared with React and others, is another way Vue distinguishes itself from the pack. Vue allows you to write regular HTML files (instead of only JSX), that can then be bound with your JavaScript handlers to execute updates without needing a refresh.
Angular
A few years back, Google developed Angular, which at that time was the leader of the pack, quickly outpacing its predecessors. Angular was revolutionary for how simple and organized it kept the code, even when you would need to scale to massive proportions. Angular allowed any programmer from another language to come into JavaScript, and start building applications very quickly.
It quickly gained the trust of the community solely for the sake of being backed by Google, but after its massively successful Angular 1.0 release, each update changed everything so drastically that developers had to relearn vast swaths of the library to stay current in addition to each update breaking the application.
Get Jordan Mauricio’s stories in your inbox
Join Medium for free to get updates from this writer.
Angular is a highly opinionated frontend MVC framework. It controls the entire application as opposed to just the view layer, which is what React and Vue manage. It forces you to do things the “Angular way,” making it more difficult to adapt to individual needs. In addition, it uses a concept known as 2-way data binding which forces the view and the model layer to always sync. This data management method, particularly in version 1, did not scale with application complexity, and heavily degraded performance. The strongly opinionated philosophy combined with it’s release cycle causing constant breaking changes has caused Angular to lose some popularity within the larger web development community.
Others
Before these three, there were also of course the web development frameworks that inspired them. These examples include, but are not limited to, Backbone with Knockback, and Ember. These frameworks solve roughly the same problem: how to facilitate the creation of web apps. They are still in use today, especially Ember, as they are both straightforward and stable. Why did these frameworks fall out of favor during the popularity of React, Vue, or Angular? I would say first, they have not fallen completely out of favor, as there are many developers still building applications in these frameworks today. However, there’s a lot more hype surrounding React and Vue because of their status. Only time can tell which framework wins out.
Backend Frameworks
MeteorJS
Meteor is a popular open-source web framework that is known for its isomorphic JavaScript design pattern. Meteor is a special item in this list due to its isomorphic nature, meaning that Meteor is intended to run on both the client and the server simultaneously. Meteor is an excellent framework for full-stack developers since it is built on top of Node.js to create a backend development environment for devs, and you’re also able to substitute Meteor’s Blaze framework for another UI library, such as React or Angular. Meteor also has a proprietary tool called Vulcan.js which allows you to use Meteor in conjunction with React and GraphQL.
ExpressJS
For the Node.js developers who would like to create web applications, Express is a no-brainer, and it is one of the most popular web application libraries for Node. Express comes with several out-of-the-box tools for easily creating HTTP servers in JavaScript with routing, middleware, and more. It also has a significant number of extensions for customizing it to each application’s unique requirements and needs.
Laravel & Symfony
There are also several frameworks for PHP developers, and one of the most popular ones at the moment is Laravel. Laravel is a free and open-source framework for PHP that provides the developer with several tools focused on dependency management, database connections, application maintenance, and deployment. Laravel is based on top of another popular PHP framework called Symfony, which introduced the concept of reusable components and libraries to PHP.
Django & Flask
For traditional Python developers who want to create web applications, there’s Django. Django follows the simple principles of PHP but enables Python developers to create complex database-driven websites. If your application needs to be something smaller and more contained, another popular Python framework is Flask. Flask is a micro-framework that does not ship with common Django utilities like form validation and database connections. There are however extensions to add these utilities to Flask, along with providing developers with more control over what exactly is in their codebase.
Ruby on Rails
Perhaps the most famous framework out of this list is Ruby on Rails (RoR). This is the web framework for Ruby developers. RoR has influenced most frameworks on this list including, but not limited to, Django, Laravel, Ember, and Sails.js for Node. In the early beginnings of RoR, it introduced handy utilities such as seamless database management, scaffolding, migrations, and other tools that are still used today for rapid app development.
Moreover, RoR introduced common programming design patterns and paradigms into the web development community, such as Convention over Configuration (CoC) and Don’t Repeat Yourself (DRY), which have inspired other famous frameworks such as React and Angular. Ruby on Rails is one of the oldest frameworks still in use today. It has been thoroughly tested and has stood the test of time, making it still a valid option today for the creation of new web apps.
CMS
CMS stands for “Content Management System” because it’s what a CMS does: it allow you to quickly create and manage all of the data and content on the frontend of an application. CMS frameworks are mostly used by agencies that work for clients, where the client needs the ability to edit content on the page without possessing any technical background. There are several different kinds of CMS’ available for use, from the very minimal to entire platforms. We’ll cover the three most common types.
Platforms
Wordpress is the most widely used CMS for websites by far, accounting for more than 30% of all websites, and nearly 60% of the CMS market. Its popularity has risen since version 4 of Wordpress, which includes an API that enables communication via the backend combined with a flexible frontend. There are alternatives, such as Joomla for content or Drupal for web applications (usually more in corporate settings). CraftCMS is another popular CMS, which focuses on simplicity without sacrificing power.
E-commerce
These CMSs are specifically for creating e-commerce websites. In this category Shopify has recently overtaken Wordpress’ WooCommerce plugin, making Shopify the most used e-commerce CMS in the world, and accounts for 10% of all e-commerce websites. WooCommerce accounts for 8% of the market, but not far behind it is the noteworthy e-commerce CMS Magento at 7%.
Static Generators
Lastly, there are static generators. These CMSs are used to make updating the content of your website very easy, requiring little to no programming. These usually supplement a traditional backend, providing a database (or similar) and fully customizable frontend. Some even provide hosting and deployment at low or no cost. Static site generators have been gaining significant traction lately for their ease of use, specifically for web applications like blogs or landing pages.
GitHub Pages isn’t a generator in itself, but is used for this purpose due to its popularity as a hosting provider. Jekyll has become very popular since it works out-of-the-box with GitHub Pages, and was one of the very first static site generators available (not to mention it’s free). Other popular alternatives include the open-source projects Hugo, Gatsby, and React Static.
Next Article: Utilities →
