This article was written by Debbie Otuagomah
and was originally published at Educative.
- What is a front-end framework?
- Why use a front-end framework?
- Wrapping up and resources
In web development, developers either work on the front-end or the back-end. The front-end refers to any part of your website or application the user interacts with. When you visit a website, all you see, from the header down to the content, and all the interactions are part of the front-end. This includes the buttons, forms, images, layout, and basically everything you can see and use on the website. On the other hand, the back-end is what happens under the hood. This includes everything that happens on the server-side, databases, and everything the user does not see behind the scenes.
Front-end frameworks are pre-packaged code you can use to build user interfaces faster. They allow you to organize the design elements of your web applications and come with pre-built components like buttons, forms, navigation bars, and more. Popular examples here include React.js, Vue.js, etc. Conversely, back-end frameworks allow you to build robust APIs, work with web services, and databases. You can use them to handle multiple HTTP requests and connect with any database you want to use.
Using a front-end framework has plenty of advantages, and most developers will encourage you to use them. Some of the advantages are:
- Reuse code. Frameworks remove the need to write repetitive code and give you access to reusable pieces of code that you can use to build web applications, mockups, and prototypes.
- Consistency. Front-end frameworks provide a consistent user-side design with components you can use all over your application.
- Support/documentation. The support for a front-end framework is great because a lot of people use it and you will probably find answers to all your questions from one google search. Also, the documentation is often very thorough.
- Database management. Back-end frameworks provide robust database management for your web applications because the application state is managed inside the framework’s data models, instead of the DOM.
- Easy to use. It is easy to integrate with other tools when you are using a framework. They also allow developers to use the latest ES6 features and worry less about browser compatibility
For instance, in React, we can create a component like so:
Here, we have built a small component we can use throughout our website instead of creating yet another copy of the same piece of code as we would in plain HTML/CSS. How great is that?
- Performance. It can increase your app’s performance, as it is very fast and lightweight. With Vue js, you get components and views that you can reuse at any time and integrate into an existing app.
- Community. Vue.js’s documentation is very thorough and comprehensive. It also has a large, helpful community you can join.
- Limited plugins. Vue.js cannot be used with some common plugins that make web development easier, which can be a huge drawback.
- Language. While Vue.js has a supportive community of users, a substantial amount of materials on Vue.js are written in Chinese and this can pose a challenge for English-speaking users.
- Irregularities. Although Vue.js is very flexible, this can sometimes bring irregularities and errors into a codebase, especially if a team is working on a huge project.
Another popular front-end framework is Angular. Created by Misko Hevery and Adam Abrono in 2009 as a side project, it is currently maintained by Google. Its current version, released May 2019 is called Angular 8 and built entirely with Typescript. The framework features differential loading, lazy loading syntax, and builder and workspace APIs.
With Angular, you can use HTML for your templates and bind the HTML to express your components clearly. It also helps you reduce the amount of code you have to write with its data binding and dependency injection, all in the browser. Some notable companies with Angular in their tech stack are Google, Udemy, and Amazon.
- Data binding. With Angular, data binding is a breeze and you can create your applications/templates faster. All the changes are in real-time and any change you make to the layer is automatically displayed on the model.
- Server performance. Using Angular improves the server performance of your application. This is because Angular only serves your static files and responds directly to API calls.
- Asynchronous programming. It makes asynchronous programming easier with the RxJS library.
- Reusable components. Angular provides you with reusable components you can create or use at any point while building your web application.
- Migration. If you are dealing with legacy code, migrating from the older version(s) (Angular JS) to Angular 8 takes a lot of time, which can slow down your project/team.
- Learning curve. The learning curve for Angular is pretty steep, and if you aren’t familiar with the Model View Controller architecture pattern, it can be quite tough to work with Angular.
- Complexity. Angular is also sometimes complex and unnecessarily verbose. You may require multiple files and dependencies for just one component.
- Reuse HTML code. React lets you use pieces of reusable HTML code anywhere in your app and you can use them with any other components in your build.
- Easy to learn. The learning curve for React is not very steep, and you can start building small applications by reading and following the documentation and tutorials.
- Improved DOM. With the virtual DOM, React removes all the inefficiencies associated with using the actual DOM and improves the performance of your web application.
- Easy migration. Migrating from an older version of React to a newer one is easy, and you can also integrate it with other frameworks like Angular and Backbone.
- Storage. When used with Redux, React helps you store and manage your components in huge applications.
- Too speedy. React is developing at an incredibly fast pace and for new developers, so it may be hard to keep up with.
- Poor documentation. It has been said that React has poor documentation because the library is evolving so fast, and there is no time to properly document all the new features.
- Limited team size. React is unopinionated, and in a large team with different approaches, this can pose a big challenge and bring inefficiencies into the codebase.
Become a frontend developer without scrubbing through videos or documentation. Educative's text-based courses are easy to skim and feature live coding environments, making learning quick and efficient. And with Educative's organized learning track, you'll always know what to learn next.
Become a Front-End Developer
- Fast development. Express js gives you a fast development experience and helps you handle requests efficiently.
- Community. This framework has a vast, highly supportive open-source community, which makes finding answers to your questions easy.
- Integration. With Express.js, you can integrate numerous third-party tools and template engines like EJS, Vash, and Jade.
- Static files. With this framework, you can easily serve the resources and static files of your app.
- Connect with other databases. You can also connect Express with databases like MySQL, Redis, and MongoDB.
- Organization issues. With Express js, the code organization needs to be very clear to avoid problems during code maintenance.
- Refactoring. Refactoring your code becomes tough as your codebase gets bigger.
- Time-consuming. You need to create endpoints, which may be time-consuming.
Backbone.js is another frontend framework that allows you to structure the code you write in the Model View Controller pattern. In this framework, the view also doubles as a controller, and it listens to events that happen in the DOM and passes them to the models as needed.
- Automatic updates. When a model changes in Backbone.js, the HTML template automatically gets new updates.
- Small datasets. If you are working with a small dataset, this framework works great and also allows you to use JSON.
- Restful API. Backbone.js has an easy-to-use Restful API.
- Limited templates. Backbone has its own dependency on a library known as underscore.js, which is the only way you can create templates.
- Limited size. This framework does not work well with large datasets and is only good for single-page applications, not multi-paged ones.
- Community. The community for Backbone is very small and this may not make help readily available when you need it.
Ember is a user-side front-end framework for creating single-page web applications with complex user interactions. It’s mostly used for its scalability and flexibility. Created in 2011, it has a small but active community and gives the ability to write structured, organized code. It’s a Model View Controller framework that developers used to build user-side web applications. It uses a route as a model and handlebar template as views, and the controllers manipulate the data in the model. Some notable companies with Ember in their tech stack include Square, Twitter, and Groupon.
- Built-in data layer. With Ember, you get a built-in data layer, which allows you to automatically synchronize your user interface with the backend.
- Documentation. Ember has thorough and well-written documentation. This also includes a guide that can help you start building as soon as possible.
- MVC. Unlike other frameworks, Ember works with the Model View Controller pattern and uses a two-way data binding.
- Browser extensions. It also uses a browser extension called Ember Inspector, which lets you edit your applications in real-time.
- Conventional. Ember.js follows a conventional approach, so it's not complex to figure out if you're already knowledgable with frameworks.
- Learning curve. Ember has a steep learning curve, and this can be a hassle for new developers.
- Errors. Ember is highly opinionated, and this can introduce errors into the codebase as people have different ways of doing things.
- jQuery. Some parts of the framework rely a lot on jQuery, and this may be a challenge for developers who use AJAX requests.
Initially created in 2012, Meteor is an isomorphic framework written in Node.js, so it can be used for both the user-side and server-side of your application. It is best suited for rapid prototyping and can be used for both mobile and web applications.
- Conversions. With the Cordova platform, you can convert your Meteor web apps into mobile apps with the same code.
- Community support. Meteor has a thriving large community and this makes help readily available when you need it. It also has rich documentation and tons of resources to help you get started.
- Smart package. Meteor has a smart package option, which helps you save time when you’re building an app.
- SQl limitations. If you want to use SQL with Meteor, you might run into a few issues. MongoDB is a better bet.
- No testing framework. Meteor does not have an official testing framework, which can be quite stressful, as it keeps changing within a few months.
- Inconsistencies. Meteor is not an opinionated framework, and if you are using it on your team, it can introduce some inconsistencies into the codebase.
- What is React? A tutorial on how to get started (article)
- Build an app from scratch with Vue.js (article)
- React Router Tutorial: Adding Navigation to your React App (article)
- React for Front-End Developers (course track)