# data[].attributes.attachment_link.readable_text
JavaScript is one of the most commonly used, basic languages of the Internet. According to a survey, JavaScript was the top language among front-end developers, and it doesn't seem to be losing popularity. That's why, today, there are so many JavaScript frameworks - and it's difficult to understand which is most effective.

The more frameworks that appear, the more discussions that surround them. The developer community talks a lot about which frameworks are most efficient for front-end development. Based on our research, we've identified the five most-discussed JavaScript frameworks. We also share Yalantis' experience by showing the JavaScript frameworks what our front-end developers prefer.

Review of Popular JavaScript Frameworks

Each month, a new JavaScript framework is released. It can be confusing for product owners to know which framework to choose. Frameworks are essential tools in front-end development. Their task is to make the workflow fast, easy, and productive. So, the choice of the framework has a significant influence on the effectiveness and productivity of the development process. Let's compare the top JavaScript frameworks.

Angular

Angular is a full-featured framework that was released in 2010 by Google, and they keep releasing updates. For example, in March 2018, the latest Angular 6 brought a bunch of improvements, including a new rendering engine for faster and smaller applications.

Today, Angular is one of the most popular front-end frameworks. Many developers choose Angular because they see it as a key to simplifying development. Due to its templates, front-end specialists can easily use Angular to create dynamic single-page web apps with lots of changing data. Moreover, Angular has a Model-View-Controller (MVC) architecture, which makes testing easier and more approachable.

React.js

React.js is a framework released by the Facebook team in 2013. Big companies, including Dropbox, PayPal, the BBC, Atlassian, and Instagram use React as a basic front-end tool.

React is perfectly suited for apps and websites with complex view logic. React also allows for the reuse of components within an application so developers don't have to create similar components again and again. With React, developers can focus on creating complex features. Due to a special reconciliation algorithm called the Virtual DOM, front-end developers receive a significant performance boost. They can develop faster since they don't have to update views because of each small change.

Vue.js

Vue.js is a rather new JavaScript framework created by Evan You. Its major aim is to make user interface development more organized.

Many front-end specialists say that Vue.js is a perfect tool for beginners. It's really easy to understand because it's focused on view layers. Vue.js works without Babel, a transpiler that converts JavaScript code into the old ES5 version that can run in all browsers. Not using Babel speeds up development. Templates in Vue.js are valid HTML, so integration is easy. This framework is a good solution for developing lightweight apps.

Ember.js

The Ember.js framework was created in 2011. It's been used to design websites for many well-known companies, including Kickstarter, Heroku, and LinkedIn.

Ember.js gets regular updates and provides a full package of features. The framework is effective for developing complex web applications, and its string-based templating system contributes to faster boot times. Ember.js is focused on scalability, so developers can easily work with both mobile and web projects.

Next.js

Next.js is not your usual JavaScript framework. It was developed by the React team as an additional tool for server-side rendering. Working with React and Next.js, developers can simplify the development process just like with the Vue.js framework.

Next.js has remarkable features, such as automatic code splitting and page-based client-side routing. Moreover, Next.js has full CSS support, called styled-jsx, to make user interface styling much easier.

The five most popular JavaScript libraries and frameworks have much in common. For example, all of them have effective component architectures and documentation systems. The features they provide are focused on reducing coding time, which is beneficial for both product owners and developers.

The choice of the perfect framework for building a UI should always depend on a project's specifics and a developer's skill. Now, we'll tell you about what our front-end developers choose at Yalantis.

What Frameworks Yalantis Front-End Developers Choose

The Yalantis front-end development team often works with JavaScript frameworks. Over the past few years, we've tried various frameworks to find the most effective and beneficial tool.

Today, we prefer working with two well-known JavaScript frameworks-Angular and React. But why these two? Let's see in detail the features that Angular and React offer to front-end developers.

Angular

The Google team has developed one of today's most in-demand JavaScript frameworks. Angular gained significant popularity due to support for two-way data binding, effective templates, and simple documentation.

Effective component-based system. Components and directives have replaced controllers and scopes as the major building blocks of apps. Component classes are separate units, which makes them reusable and easy to add to existing applications.

Two-way data binding. This feature reduces the time required for coding. Developers can make changes in models and views in one step without waiting until UI elements are rendered.

TypeScript. Angular learning resources and documentation are based on TypeScript, so it's difficult to avoid it. TypeScript may seem challenging to some developers, but there's nothing bad about it. Many new features become available for TypeScript much faster than for the other languages. Moreover, TypeScript provides object-based programming patterns and optional static type checking, which is useful for large-scale applications.

Handy templates. Templates in Angular are presented in HTML so developers can create functional applications even if they aren't so good at JavaScript. The browser processes templates and generates rendering instructions, also known as directives.

Simple documentation. All the official Angular documentation is short and simple so even developers with little experience can quickly learn the basics.

Strong community support. The Angular framework is a Google product, so obviously it has many fans and supporters. Developers can easily find lots of tips on blogs and forums.

To summarize, the Angular framework is a top tool for front-end development, providing lots of features. Both businesses and developers profit from creating applications with Angular. First of all, Angular is maintained by Google, so the framework gets regular updates and features are constantly improved. Second, unlike many other frameworks, Angular is available under the MIT license. For businesses and developers, it's important to use licensed tools since they're more reliable.

React

React is a revolutionary JavaScript framework that takes a leading position in JavaScript framework ratings. It has great popularity among GitHub users, who have given it more than 95,000 stars. But what makes React stand out?

Boosted performance. React has a unique feature called Virtual DOM that boosts the efficiency of coding. When developers make small changes, they don't have to update a whole view. The changes go through the Virtual DOM, which re-renders only the necessary part of the page. This approach takes less time and saves developers' efforts.

JSX. A declarative JavaScript syntax that helps to create neat and readable code, JSX also helps to combine components into one verified file.

Easy to learn. If developers know JavaScript, they can start using React right away. Developers can skip manuals since React is well-organized and simple. To become a proficient user of React, you just need to learn a bit about JSX.

React rendering. React is a perfect tool for view rendering. It allows you to render your page on different platforms including websites, native apps, and VR apps.

Reusable components. React, just like Angular, has a component-based architecture. This means that using the React framework, developers can consider components as building blocks of the application. The biggest advantage of this is that ready-made components can be used in different parts of an app so developers can build apps much faster.

Facebook and community support. React is curated by one of the tech giants-Facebook. The Facebook team knows how to deal with complex web apps, so the React framework is focused on boosting performance. React's community is one of the biggest among popular web frameworks for front-end development. There are many blogs, plugins, and SDKs related to React, so in case developers have any problems with the framework they can easily find answers on the internet.

All in all, the React framework is an effective tool for user interface development. Its functionality enhances development by reducing time spent on coding, which is a great benefit for businesses and developers. Moreover, React is easy to learn, so developers can start using it without preparing. Finally, it has great support from the community and Facebook, so the framework will definitely receive updates and new, interesting features.

We've described the top five JavaScript frameworks but it's up to you which to choose. When making your choice, compare performance, architectures, learning curves, documentation, organization, and community support.

# data[].attributes.attachment_link.title
JavaScript Frameworks: How To Make Your Choice - DZone Web Dev

# data[].attributes.attachment_link.description
JavaScript is one of the most commonly used, basic languages of the Internet. According to a survey, JavaScript was the top language among front-end developers, and it doesn't seem to be losing popularity. That's why, today, there are so many JavaScript frameworks - and it's difficult to understand which is most effective.

# data[].attributes.attachment_link.readable_text
Tech stack is the combination of programming languages, tools and frameworks that the developers use to create web and mobile applications. There are two main components to any application, known as client side and server side, also popular as front end and back end.

A stack is created when one layer of application is built atop the other, with the help of codes and hardware modules ranging from generic to specific. A stack contains different layers of components/servers that developers use to build software applications and solutions.

You have a rich choice of tech stacks in the web development world that it is quite easy to be confused when you are called up on to choose one of them to use on your web development project. The tendency is to pick something easier to learn, or maybe the newest.

However, by the way things stand, that should not be the only criteria of selection. Teams that are already familiar with the tools and languages they work with will prefer to pick those first (like for example, embedded or desktop dev.).

Things were much simpler on the development front a decade ago. Developers used ASP.NET on the front end, SQL Server on the backend and .NET on the middle tier. Then over the years, new tools and technologies came into existence and the need to select the right technologies for building software products emerged.

After all, the main aim of a developer is not just to build a professionally, functioning software, but something more than that - maintainability, scalability and security of the app, the levels of which would be determined as per the requirements.

It is important to have a foolproof plan in mind while choosing a tech stack, because the impact of this would be reverberated across various layers of business, including HR, finance, management and marketing.

In fact, out of the three main steps in planning a web development project (two of which are understanding the project in a business perspective, and passing the baton {HR perspective on who holds the responsibilities for the project}), the third one, picking the stack (the technical perspective) must be given great care.

Anatomy of a Tech Stack

As hinted earlier, tech stack comes with two software components, - Frontend and Backend (also known as client side and server side). Now let's get a deeper into the anatomy of a tech stack.

Client-side (Front end)

Client-side, as the name suggests is where the real interaction with the user happens. The user will interact with the website, the web app or a mobile app depending on what he is using.

There are three main technologies in front end.

HTML - the markup language

CSS - the stylesheet

Javascript - browser scripting language

The two main front end JavaScript frameworks in the market today are AngularJS by Google and ReactJS by Facebook. The main advantage of these frameworks is that they let you create highly intuitive user-interfaces. As both are language independent, it doesn't matter what kind of tech stack you are using for the server side, it will still function optimally according to expectations.

Twitter's Bootstrap is the most favored framework for CSS ever since its launch because it has interactive components built on JQuery. Using the native language is generally the trend while building applications probably because it gives the developers more control and easier hardware access. Probably, this is the reason why Java is used for Android and Objective-C or Swift is used for iOS.

Server-side (Backend)

The back end consists of a server, an application (OS, Web server, Programming language, Web framework), and a database. Server side is the umbrella term used for websites where developers perform the following functions like programming the business logic, server side hosting and deployments, working with databases etc.

The server side stack responds to user requests, accesses the database and executes simple CRUD (Create, Read, Update and Delete) operations. LAMP and Python are two of the most popular backend stacks used by developers (more will be discussed later).

LAMP is the abbreviation for Linux, Apache, MySQL and PHP. Linux is the server operating system, Apache is the web server, MySQL is the database and P is for PHP, the scripting language.

Python-Django framework is used for whipping up a quick working prototype, mainly by the entrepreneurs. Instead of PHP, developers use Ruby or Python too. Developers prefer to use popular frameworks because they provide them with the vetted implementations of common features like data access, user authentication etc.

Special mention must be made about JavaScript, which was just a browser scripting language until a little while ago. It then emerged as a popular server side programming language. JavaScript's MEAN stack rose to popularity as one of the most popular choices for MVPs.

MEAN is short for MongoDB, Express.js, Angularjs and Node.js. MongoDB acts as the NoSQL database, Express and Node runs on backend and AngularJS renders the interface.

Middleware

Middleware is a bit more esoteric and consists of application servers, content management systems, web servers, and similar tools that support app development and delivery. Written in Java and C#, Middleware facilitates standard communication and management of data between the front end and back end of tech stack; hence called the "software glue".

Middleware performs the following tasks - parsing, authentication or just providing a standard way to communicate data between systems. Interestingly, Middleware is not a developer tool, but actually integrated per-say into the systems it facilitates. Middleware technologies include TIBCO, CICS, Virtia and MQ.

Middleware functions as a hidden translation layer, almost like the plumbing, which connects the two applications together; it enables communication between database and data. For example, when the user submits a form on a web browser, it is the middleware through which the dynamic web pages will be retrieved based on a user's profile.

Middleware also plays a crucial role in distributed processing with real time actions, so it definitely does something more than just sending data back and forth.

Choosing a Web Tech Stack - Factors to be Considered

As there are several kinds of tech stacks available for web developers, how do they go about choosing the right ones for their project?

Here are some guidelines:

#1. Type of Project

The type of project is always a determinant in choosing the right stack.

Small projects  - If the project is a small one, and you need to deliver it in the shortest time possible, then simple technologies like CMS or Wordpress can be used; especially if the requirement entails a working prototype that has be delivered within a strict timeline.

Mid-range projects  - But when the project is small to mid-level, then it would need a combination of programming languages because the developers would need something that provides them with various functionalities and seamless integrations across multiple platforms.

Apps for such projects could include e-commerce websites, financial industry, major government projects etc. In such cases, Java and C# are the commonly used programming languages.

Complex projects  - Then there are complex projects where the developers have to create web apps with several functions. Here too, they will be working with several programming languages and making use of different web technologies. Examples of such projects would be social networks, huge e-commerce marketplaces, etc.

While deciding on the size of the project, it is imperative to look at the business goals as well. This is because the impact of technologies used would directly influence the business goals, because the aim is to provide seamless customer experience. Two main things to consider would include:

Processing heavy loads  - If the processing load is huge, then you need to rely on programming languages and frameworks that support this.

Low latency  - You may have to use a web stack that reduces latency and make the application highly responsive.

#2. Team's Expertise and Knowledge Base

An important factor to consider is the level of expertise the developer team possesses on working with various technology stacks. Even after deciding on the tech stack, remember, the job doesn't end there. The developer team will have to maintain the app after launch too.

The reason why expertise is so important is that developer may trudge along issues when they are producing codes. And to find a solution, the team has to be really experienced, because the project runs on a deadline and work has to be done fast.

So if you are about to choose a web tech stack, make sure it has huge developer community and rich documentation. Keeping tabs on Github and Stackoverflow would help you understand the strength of the developer community of different programming languages.

It is also important to choose technologies that are easily testable. And certain technologies call for Test Driven Development (TDD) where you've got to test first and code later. Through TDD, you can be assured of project quality and speed. The developer team must be equipped and experienced to deal with the TDD approach.

#3. Time to Market (TTM)

Planning a date for the product launch and finishing product on time is a challenge. So consider the " Time to market " factor when you pick a tech stack. If it consumes a lot of time for development and testing, remember there is a high chance you will not make it on time for the launch date. And the lesser time you take to develop an app, the cheaper it will be for the company.

Time to market or TTM heavily depends on the technology stack you choose for the web app. Here are some factors affecting that:

Unique & innovative solutions  - If you stumble upon a tech stack that provides a unique solution for adding functionality to your app, then you can consider using it. An example will be RoR stack with its impressive open source libraries called gems. Gems really help in reducing TTM.

Third-party integrations  - If your app needs certain features from third-party solutions, then choose a tech stack that allows for seamless integration. This helps you to easily add the functions that you need for your app.

Developer expertise  - As mentioned above, developer expertise will directly influence your TTM. If you have an efficient developer team with a strong knowledge base, then you can release your product on time, free of bugs.

#4. Scalability

Scalability refers to the ability of the application or website to handle work. As the number of users goes up, the app must be able to handle the growth spurt, including the seasonal spikes. The developers should choose a stack that will accommodate future growth of the app. The dimensions of growth could be horizontal and vertical.

Horizontal scaling means running the product on several servers at the same time to handle the influx of traffic. Vertical scaling means you add more programs to process new data. Both horizontal and vertical scaling are important to prevent a product collapse in the future.

Before starting the app development, build a developer team for the Minimum Viable Product (MVP). MVP is the core set of deliverables that you need for the deployment of the web app. It is based on the highest return investment and lowest risk factor. While considering all the your parameters in choosing the web stack consider the MVP first, and then grow from there.

#5. Maintainability

The maintainability of the app depends on a couple of factors:

Codebase  - If the code is too lengthy and complicated, then developers would need to spend a long time trying to process it; and if the code base is too concise, then debugging it correctly becomes an issue. So it is important to choose a language, that uses short, but easily maintainable and reusable codes.

Basic software architecture  - The software architecture supports the portability, scalability and reusability of the app, and it influences both the dynamic and static component configurations.

Maintenance of the software structure must be done even when the apps are scaled, when more users are added, when porting takes places and when features get more dynamic. Users should be able to enjoy seamless performance of the app.

# 6. Overall Cost of Development

While most of the popular tools and frameworks are free and open source, you may have to subscribe to them by paying fees to get access to the advanced features. So it is important to determine, how much you are willing to spend on an app development project.

Depending on the technology stack that you use, you will have to get its license as well. So weigh the balance of cost of using a particular stack vs. the usability of its features before making the final decision.

The cost incurred for the infrastructure is also a major point to be considered. And of course, you have to pay the salaries of the developers, and if you are getting more people on contract basis, you have to consider their cost as well. In short, if cutting costs is a major aspect, then you must opt for open source technologies.

You can even download free project cost estimation tools to gain insights into what your software development project will cost.

Most Commonly Used Tech Stacks

Given below are some of the most popular tech stacks that developers use in their projects. You can go through each of them and decide which is good for you.

1. .NET Stack

.NET is a feature rich, thoroughly battle tested framework that lets you build dynamic and interactive web apps. And .NET stack is a subset of Overflow Stack, a comprehensive tech stack that fulfils all the requirements of web front-end, database and .NET developers.

Both C# language and .NET framework form the centrepiece of this Microsoft's technology stack. By combining .NET stack with other open source technologies, developers have built a wide variety of applications right from small scale server side web applications to huge enterprise-level, transaction processing systems.

.NET Stack has about 60 frameworks, platforms, SDKs, IDEs, SOA, libraries, etc. spread over 13 layers. This includes CLI languages like C#, F#, VB.NET, Fantom, etc.

Main features of .NET tech stack are

1. Interoperability  - Interoperability among different platforms is a major advantage of .NET tech stack, enabling developers to make use of a full range of complementing features.

2. Language independence  - .Net stack provides language independence giving the developers freedom to choose their language of choice.

3. Portability  - It is compatible with a number of frameworks and platforms making portability easier. Developers can choose the framework and technology they are comfortable with.

4. Security  - The stack is designed to repel luring attacks from hackers, providing various levels of trust on the difference codes running in the same application known as CAS or Code Access Security.

5. Speed  - The high speed of .NET stack allows timely completion of projects, timely launches, and satisfied stakeholders. Speed plays an important role in developer time and runtime because what speed you gain in development time will be gained in runtime as well.

2. LAMP Stack

The LAMP stack made of all open source software components is the one of the earliest stacks to get popular. The main components of LAMP are Linux operating system, the Apache HTTP Server, the MySQL RDBMS (relational database management system), and the PHP programming language.

LAMP works well for both dynamic websites and applications. The software bundle LAMP can be combined with other open source and free software packages, making it highly flexible, customizable and very easy to use. It is also the most traditional stack model around, and very solid. PHP is interchangeable with the languages Perl and Python.

Variations of LAMP include:

WAMP (Windows/Apache/MySQL/PHP): This is equivalent to Microsoft Windows OS, and all-inclusive and easy to get started with. The WAMP stack has the IIS server.

LAPP (Linux/Apache/PostgreSQL/PHP):This stack comes with a PostgreSQL database variation that's configured to work with enterprise-level projects.

MAMP (Mac OS X/Apache/MySQL/PHP):This is a Mac OS X operating system variation and available for both Windows and Mac.

XAMPP (Linux, Mac OS X, Windows/Apache/MySQL/PHP, Perl): This stack makes a more complete bundle, and runs on Linux, Windows, and Mac operating systems. The stack is also equipped with FTP server, which is cross-platform.

3. MEAN Stack

MEAN Stack is an open source, free Javascript software stack developers use for building dynamic web apps and websites. The MEAN stack components are MongoDB - a NoSQL database, Express.js - a web app framework that runs on Node.js, Angular JS (or Angular) Javascript MVC framework that run in browser JavaScript engines, and Node.js - an execution domain for event-driven server-side and networking applications.

As the support programs are coded in JavaScript, MEAN stack makes it easier for developers to code the application for both server side and client side execution environments - and that too in language uniformity. This also makes it easier for developer working on the client side, understand the codes of the server side.

It supports MVC pattern, is open source and is also mobile friendly because AngularJS is flexible and developers can easily incorporate JS testing frameworks. MEAN uses NoSQL's native JSON for data transfer and offers access to Node.js' JavaScript module library making it the most probable solution for building scalable and agile apps.

Switching to document-based NoSQL makes it easy for developers writing SQL, giving them the flexibility in structuring the data., thereby increasing the productivity of the team.

The variation of MEAN include: MEEN: MongoDB, Express.js, Ember.js and Node.js.

4. ROR Stack

Ruby on Rails stack facilitates quick app development, thanks to its rich repository of gems - library integrations. The framework is highly scalable and it follows the ActiveRecord pattern and is compatible with MySQL on the back end.

Ruby on Rails has its own built in database. It can abstract away the lower data base commands so you can write the codes in Active Record syntax and then swap it with lower level database specific queries, provided you don't use too much database specific queries.

Here's a collated list of some of the tools and frameworks used in a tech stack.

Frontend

Middleware

Ruby on Rails

Node.js

JVM language (Java, Scala or Clojure or mix)

Backend

Postgresql

MongoDB (if Postgresql is not used)

Redis

Some message bus (RabbitMQ, ZeroMQ, or Redis)

Solr (if search is needed)

Conclusion

Going through the factors that you need to consider while choosing a tech stack, and a study of the different tech stacks currently in use today would give you an idea of how to select the right one for your project. You need to understand your project requirements well in order to choose the technologies for it.

Sometimes, time-proven technologies may not be enough, because you need to get realistic and understand the pros and cons of each. A talented team of skilled and professional web developers will be able to choose the right tools for creating a scalable and highly functional app that beats competition.

Interested to know which is the perfect web tech stack for building your new product? We can help you..
Contact Us Today!

Originally published in

Cabot Solutions Blog on August 30, 2017.

# data[].attributes.attachment_link.title
How to Pick the Right Web Technology Stack for Your Product

# data[].attributes.attachment_link.description
Tech stack is the combination of programming languages, tools and frameworks that the developers use to create web and mobile applications. There are two main components to any application, known as client side and server side, also popular as front end and back end.

# data[].attributes.headline
How to Select Right Framework to simplify WebApp Projects

# data[].attributes.subject
How to Select Right Framework to simplify WebApp Projects

# data[].attributes.attachment_link.title
Which Front-end Framework to Select for Your Next Project

# data[].attributes.attachment_link.description
Looking for the right front-end development framework for your company? We can help you decide which front-end framework to use for your project requirement.

# data[].attributes.attachment_link.readable_text
"What's the 'right' JavaScript library/framework for us to use?". That's a question that comes up a lot nowadays given the multitude of choices available and one that doesn't have a "right" answer of course. I'm fond of saying, "Use the right tool for the right job" when I'm onsite at a company teaching a training class or providing architecture/consulting services. While I certainly have my technology preferences, to force them on someone or on one of the companies I work with would quite honestly be naive and shortsighted. If there's one thing I've learned working in technology over 20 years now, it's that "one size fits all" is never a valid view in technology (or life in general). The world's way too diverse for "one size fits all". We all like to think that our way is the "right way" (I include myself in that statement), but that view is very subjective and limited to what we like and don't like, what we know and are comfortable using, our personal experiences, the types of applications we're building, as well as many other factors.

When it comes to JavaScript libraries/frameworks, it's no secret that I'm a fan of Angular and have been for many years going back to the AngularJS days. I've seen both versions used very successfully in small and large companies. Having said that this post won't focus on Angular at all. In fact, I like other options as well ( Vue.js is one that I really like for example) and use them in my company's and our clients' applications as appropriate. I don't believe in "one size fits all" as mentioned earlier and instead always try to focus on the "right tool for the right job", or you might say "right tool for the right app".

For example, about a year ago we needed to build a small data-centric app that dynamically rendered controls based on hierarchical no-SQL data and sent the edited data back to the server for processing. We started out using a framework and soon realized it was overkill for the business problem we were trying to solve. We needed a JavaScript data binding library to get the job done - nothing more. While we could've gone with React, Angular, Vue.js or another similar option, we ended up going with Knockout.js (something we were very familiar with) because it provided the exact functionality we needed. That gets back to my "right tool for the right job" comment earlier. We're currently working with several companies that are building large-scale applications that have a lot of features. Something like Knockout.js probably isn't the right tool for those types of applications because they need data binding plus several additional features that other libraries/frameworks can provide out-of-the-box.

Should you pick Angular, Vue.js, React or another library/framework? Many teams feel overwhelmed by the sheer number of choices out there and are afraid of making the "wrong choice". Here are my general thoughts on making a choice. I won't be recommending a specific library/framework but instead walking through some key questions I think you should ask during the selection process.

Do Our Users Care?

When a debate comes up about a library/framework I always like to say, "My mom doesn't care what you use (and neither do your users)!". That could be said about the majority of clients using any application you or I have ever written. They want something that works, solves a business problem, and is quick and easy to use. Very few application users poke around and ask, "Hmmm...I wonder what library/framework they're using?". When making a decision about a library/framework remember that the application you're writing is supposed to be solving a business problem for customers - not for you (in most cases anyway). Eliminate personal biases about libraries/frameworks and you'll ultimately make a better decision in the long-run. We tend to gravitate to concepts we already know and feel comfortable using. It's important that we're willing to step outside of our "comfort bounds" though when making a decision. Every single library/framework I've worked with over the years has pros and cons. We tend to ignore the cons for libraries/frameworks we're comfortable using whether we acknowledge it or not.

As developers, we tend to get caught up in our own little world and get into time-wasting battles over "who is right?". We often forget that as long as the application does what it's supposed to do, our clients will likely be happy using it. If we boil our job down, isn't adding business value and keeping users happy what the job is all about? As long as a given library/framework can be used to build a successful application, then the library/framework you choose really doesn't matter assuming it meets your business, performance, and maintenance goals. It just doesn't matter - my mom and your clients don't care. Of course, there's more to the app development story aside from keeping users happy and adding business value.

What Will Make You the Most Productive?

What language, library, and/or framework will make your team the most productive? That's the next question I like to address. If it's JavaScript (since that's the focus of this post), are your team members proficient in ES5, ES2015, TypeScript, CoffeeScript, Elm, or something else? Do they already work with frameworks or have more of a scripting background?

I'm not a fan of jumping into a "popular" library/framework without the pre-requisite skills to be productive using it. Doing that ultimately leads to more problems than solutions in my experience no matter how great a library/framework may be. I've seen it happen time after time where a manager thinks they can send a developer to a class and that they'll come back knowing everything they need to know.

Not knowing the key aspects of a library/framework can lead to applications being built that aren't based on best practices and riddled with maintenance issues as a result (more on that in a moment). While a team can certainly be trained on a new language or library/framework, it takes time for them to become efficient and productive using it. Pick a small prototype application to build if you want to prove out a library/framework. Once the prototype app is created have a team discussion about how productive everyone felt they were, pros and cons, and general opinions from team members. I don't care if it's Angular, Vue.js, React or something else, start with something small if you're in the process of choosing a library/framework. Take the time to do a proof of concept.

What's the Maintenance Story?

I've done a lot of production support/maintenance on applications over my career and realized early on how important it is to build applications that are easy to maintain. Change is inevitable in the world of technology (yes - I'm stating the obvious here) so going with a library/framework that your team feels comfortable maintaining is important. This includes evaluating how easy it'll be to hire new people that can hit the ground running with the chosen library/framework, taking into account contractor work (if your company uses contractors) and more.

A few questions to ask related to maintenance:

1. Are the developers and/or production support teams used to working with a compiler or a scripted language? Often times it's not as simple as choosing a library/framework - you need to choose the language as well. That might seem obvious (JavaScript), but there are other options to consider. Being careful to choose the underlying language that will be used along with the library/framework is important. Developers used to a compiler may like something like TypeScript for example, whereas JavaScript developers with no experience using a compiler may feel more productive and comfortable using ES5 or ES2015.

2. Does your team write unit tests, end-to-end tests, etc.? Does the library/framework provide good support for that?

3. What is the deployment process like for the library/framework? Is it as simple as moving a few files or is there a build process involved?

4. Does the library/framework provide a way to organize code and features?

5. Does the library/framework provide a widely accepted style guide or list of best practices that developers on a team can follow to ease maintenance down the road?

The maintenance story is one of the most important factors to me personally when choosing a library/framework.

What's the Longevity of the Library/Framework?

Before making a decision on any library/framework I recommend spending time looking at the source code repository. Here are a few questions to ask:

1. When was the last time the library/framework was updated? Is it stale or actively moving forward?

2. How does the library/framework team handle versioning and does it fit into how your team/company works?

3. How robust is the general open source community for the library/framework (this is a key question I always ask before jumping into a library/framework)?

4. How quickly are issues resolved? On a side note, don't judge a library/framework by the total number of unresolved issues. Some people tend to use the "Issues" area of a repository to post questions and make feature suggestions which aren't issues. I like to look at how often issues are being resolved to get a sense of the health of a given library/framework.

5. How many contributors does the library/framework have?

6. Is the library/framework supported by a full-time team or run by an open-source community. There are pros and cons to both of these.

I wish I had a dollar for every time I've been asked, "How long do you think library/framework X will be around?". It's a great question and something we all worry about. Some companies don't have the luxury of constantly updating their applications which is why teams are scared of picking a library/framework that may disappear one day. If only I had a crystal ball to help predict the future. 🙂

JavaScript projects move fast and tend to have a lot of churn. I'd recommend picking a library/framework that has been stable for at least a year, has a robust community behind it, and that updates frequently.

Choose a Library or a Framework?

Are you looking for specific library functionality (such as rendering the UI and/or data binding) or do you want a full-featured framework that has a lot of functionality included out-of-the-box? Libraries typically target a few very specific features whereas frameworks cover a brand range of features.

If your team is already using a framework (on the server-side for example), then moving to a JavaScript framework may make sense to keep things as consistent as possible between the client and server. On the other hand, if you prefer to put together different libraries (similar to choosing what you want to eat at a buffet) so that you have the flexibility to swap out different features as needed, then one or more libraries may be what you're after. As with everything, there are pros and cons to both approaches.

I was initially attracted to AngularJS (and now Angular) because of the framework functionality they provide. I have a Java and .NET background and have released many successful web apps over the years using frameworks. I like the consistency that frameworks typically bring to the table for developers on a team. Features such as UI rendering, data binding, routing, form validation, testing, and much more are available out-of-the-box in frameworks like Angular.

Libraries like React and others can provide a lot of functionality without the overhead of a "framework". They can make it quicker and easier to get started (a very subjective statement I realize) and are generally more lightweight depending on the functionality your application needs. So which is better - a library or a framework? Talk to 100 developers and you'll get 100 different answers. Here's my view of some of the popular libraries and frameworks out there. These certainly aren't the only options, but they're the big players as of today (in my opinion anyway). Here are 3 that I've personally looked into, worked with directly, or seen used successfully at companies I work with.

Vue.js - Vue.js is a "progressive JavaScript framework" (although I've always thought of it as a library). With additional scripts, you can build both large and small apps using Vue. In addition to being lightweight, it's also very fast and is really easy to get started using. If you're familiar with AngularJS (the 1.x version) you'll pick up on Vue very quickly. It's an open source project that is growing rapidly. It has a CLI to help get started with your first project: npm install -g vue-cli

React - React is a UI library that has many additional features (and 3rd party libraries) that can be added. It provides great performance, is easy to get started using, and is quite popular. A full-time team at Facebook as well as a robust open source community help run the project. A smaller variant of React called Preact is also available. It's used by Facebook which is a bonus when it comes to longevity. React provides a CLI to help get started: npm install -g create-react-app

Angular - If you prefer a framework then try out Angular. It provides a robust set of features out of the box that are all integrated. It also provides Ahead-of-Time (AOT) compilation for production builds and has a robust CLI. It's run by a full-time team at Google and has a robust open source community as well. It's used by a lot of key apps inside of Google which is a bonus when it comes to longevity. Note that if you're new to it, "AngularJS" refers to the 1.x version while "Angular" refers to the 2+ version. Get started using the CLI with the following command: npm install -g @angular/cli

There are certainly several more libraries/frameworks that could be listed and the list will definitely change over time. I made a decision to only list ones that I've had direct experience with either through development or working with a company.

Are You Targeting Mobile?

If your apps will be run on mobile devices (web or "native"), how well does the library/framework you're looking at support mobile development? Do you have to build all of the mobile controls that are touch-optimized by hand? These and many additional questions can be asked as you're choosing a library/framework.

What 3rd Party Options are Available?

Another factor to consider is the 3rd party options that are available for the library/framework you're considering. Do you really want to build that date picker or calendar from scratch (having done that (once), I'd argue "NO!"). Having a robust set of 3rd party functionality that you can include in a library/framework is important especially when it comes to productivity.

Do You Really Need a Library/Framework?

Some people will argue that "vanilla" JavaScript is the way to go for JavaScript-centric applications so I wanted to mention that option. While I completely disagree with the "vanilla" JavaScript approach (especially for larger enterprise apps) for a variety of reasons, it's certainly a valid option to consider depending on the type of app you're building.

Why don't I like this approach? If the app being built is fairly small then the "vanilla" JavaScript approach may work fine. However, for more robust applications, everything has to be built from scratch which means reinventing the wheel for routing, data binding, form validation, history, and so on and so forth. It means knowing all of the browser quirks, security standards, new and upcoming technologies, and much more. Who has the time to consistently stay on top of all of that while also building business applications? What happens if the key person/people that built the "vanilla" JavaScript code base decide to leave for another job? Now you're not only worried about maintaining business applications, but also the custom JavaScript utilities or framework that someone built internally.

Conclusion

Libraries/frameworks get very personal and it's important to take our personal biases out of the picture when making a library/framework decision. I've tried to steer clear of diving into pros and cons for specific libraries/frameworks (aside from mentioning a few above) since I feel strongly that each person/team needs to experiment on their own before making a decision. Talk to someone you trust who has used a library/framework you're considering to get their feedback. Build a simple prototype and see how you feel afterward. Find answers to some of the questions mentioned in this post.

There are many additional questions and guidelines that could be listed to help in choosing the "right" library/framework for your team. All libraries/frameworks have their own set of pros and cons and all of them can be used to build small, medium, and large applications. Is one better than the other or the "right" one to choose? There's no way to answer that since it's very subjective. Here's a post that mentions JavaScript library/framework strengths and weaknesses and while it's very opinionated, it provides a starting point. Many other posts comparing libraries/frameworks are out there as well, just keep in mind that each one is typically quite subjective.

I hope some of the guidelines and concepts listed here will help the decision process for you and your team.

# data[].attributes.attachment_link.description
"What's the 'right' JavaScript library/framework for us to use?". That's a question that comes up a lot nowadays given the multitude of choices available and one that doesn't have a "right" answer of course. I'm fond of saying, "Use the right tool for the right job" when I'm onsite at a company teaching a training class or providing architecture/consulting services.

# data[].attributes.attachment_link.readable_text
Gain insight into choosing the right JavaScript framework for your next enterprise-grade app. Learn about Angular, React, Vue, Ember and Aurelia.

Update (15 Feb, 2018): This webinar is now available as a whitepaper presenting the key criteria for choosing a JavaScript framework, from ecosystem considerations such as history, corporate support and community, to framework-specific considerations like the getting started experience, skill requirements and tooling available. [ Free download]

A couple of weeks ago I had the pleasure of hosting a webinar to help give insight in to today's popular JavaScript frameworks, including Angular, React, Vue, Ember and Aurelia. During the webinar we had limited time to discuss each framework and I had to get through a lot of content. So, this blog post serves as a way to find the recorded webinar as well as a quick breakdown of each framework.

As a quick disclaimer: as you read this, keep in mind that I am not necessarily an expert in each framework. There may be more efficient ways, or just other routes, to handle the same scenario that I set up for this project. Now, with that out of the way let's go ahead and get started.

Webinar recording and slides

First things first, if you weren't able to join the webinar, or if you'd just like a refresher of what I covered, here's a recording of the webinar.

As for the slides, you can find them right here. It's all driven through the web so no need to download anything!

Sample Code

During the webinar I covered a sample application for each technology. It's a fairly simple application that covers some of the basics for each framework. The app highlights:

How to bind a simple string (title of the page)

Binding and rendering an unordered list with list items

How to bind to an input element

Responding to a click event of a button

Adding an item to the unordered list

Here's a quick gif of the app in action.
Figure 1: Sample application showing a list of items and adding an item through the input element and a simple button
If you'd like to follow along here's the GitHub repo for the sample project. You'll be able to use the readme of the project to set up each framework's app.

Now, let's dive in to each framework!

Angular

Angular is one of the more well-known libraries that I covered during the webinar. It doesn't need a ton of introduction, but Angular continues to receive regular updates and will soon see Angular 5 (currently in beta) go mainstream. Coming from a lot of history with AngularJS 1.x and Angular 2 and 4, this framework has been re-written to ensure that it is not held back by older versions and serves the modern JS dev far better.

Here are some quick stats of the current popularity of the framework.

27K+ stars on GitHub

1.7 million NPM downloads per month

127,272 downloads of Augury, Developer Tools for Chrome

Angular has picked up a lot of steam within the enterprise, and for good reason. TypeScript tames JavaScript a bit by bringing in strong types, and Angular itself is very strict with how an application should be set up. TypeScript is very popular with developers coming from typed languages (for obvious reasons). There are also specific ways that components, routes, and services should be set up which means that the guidelines offered by Angular can be, and must be, adhered to. This all means that large teams have an easier time ensuring code quality and collaborating overall. Of course, smaller dev shops can benefit from this as well, but these factors tend to help Angular gain traction within larger organizations.

While it can be a bit cumbersome to work with from scratch, tooling like the Angular CLI makes it very easy to pick up and start working with Angular. It also means that taking advantage of features like Ahead of Time compilation and other features that speed up Angular applications-which we should all take advantage of-is quite easy.

React

React is the most-used library out of all the ones that I covered during the webinar. When it was initially released the idea of the Virtual DOM was pretty revolutionary. Nowadays React remains popular and has recently undergone a revamp of its core engine, dubbed React Fiber, that everyone can take advantage of since React 16. Impressively the React team managed to rewrite React without forcing huge sweeping changes or upgrade pains for their users.

Here are some quick stats of the current popularity of the framework.

75K+ stars on GitHub

~5 million NPM downloads per month

720,848 downloads of React Developer Tools for Chrome

One thing I should mention right away is that the biggest reason for people not choosing React used to be the license associated with it. The BSD + patent license was something that scared away a lot of devs, but earlier this year Facebook got rid of this license and went with the standard MIT license. If you go with React 16+ you'll be safe.

Many people pick React due to its flexibility, all while still having some guard rails to make sure you stick to some sort of structure throughout your project. React offers everything that you need out-of-the-box, and if there's something that's missing generally it can be picked up directly from the React team's GitHub. One thing that comes with the territory with React is JSX, or "HTML in JS" as some call it. There is some debate around whether JSX is good or bad, but this is something that teams should decide before heading in to working with React.

Components rule within React, and while you can of course create helper files and models that can be included, whatever is being rendered is going to go through a component. Each component is in charge of its own state and functions attached to it, with passing of information happening through defining "props" and passing values down, or potentially bubbling up events to change state in a parent component.

Vue

Vue.js is the youngest of the libraries I highlighted, but is the fastest-growing out of all of them. Dubbed "The Progressive Framework" Vue starts off with the core library and developers add supplemental libraries to their project to expand coverage where needed. Developers love Vue for how easy it is to pick up and add in to any existing project while still remaining extremely powerful.

Like the other libraries, here are some stats for Vue.

67K+ stars on GitHub

680+ thousand NPM downloads per month

258,207 downloads of Vue Developer Tools for Chrome

As mentioned, Vue has gained a ton of popularity since its original creation. One of the biggest reasons teams pick up Vue is because of how easy it is to get started. Just including Vue.js as a single JavaScript file on your page allows you to work with Vue without the need of complicated loaders or anything like that. This means that Vue works very well for teams trying to migrate existing applications to something more modern. Also, the entire page doesn't need to be Vue-specific either, you can add Vue-ified HTML and components as is needed rather than convert everything right away.

Vue also has an advantage with how minimalistic it starts, while having a very wide breadth of supporting framework libraries like loaders, the router, the CLI and many more. It supports standards-based templates (just using simple HTML templates) or even JSX (depending on what you've added to the project) so it's also easy for devs coming from other frameworks to keep their favored way of writing the view. All of this means developers get to pick and choose exactly what they want and build up the complexity of their projects as needed. Hence why it is referred to as the Progressive Framework.

Ember

Ember is the oldest of the frameworks that I covered during the webinar. A true MVVM framework, it originally was released during a time where the strict MVVM pattern was preferred for frontend frameworks. The Ember team has done a great job with keeping up with the latest ideas brought to us by Angular and the like, so with the 2.0 revamp there are features like components that help with modern JavaScript development.

Here are the stats for Ember.

18K+ stars on GitHub

340+ thousand NPM downloads per month

69,383 downloads of Ember Developer Tools for Chrome

Ember has a lot of benefits that makes it a great fit for larger teams and enterprise companies. It's fairly strict with how an application should be structured and ensures that you stay within its guard rails so you're not being inefficient. Some may not like it, but for teams that have varying skill levels and have the need to follow stricter guidelines it's a perfect setup. It also follows the MVVM pattern closely which is a very popular methodology for structuring applications across web, desktop and even mobile.

Using the Ember CLI, we build out our application by defining routes, and each route has a data model. This model can then be used within the ViewModel of the View accompanying the route, and the models have a defined way that they can be queried and interacted with through CRUD operations. People that feel like dynamically adding fields etc., should not be done on the underlying data will love Ember's models since they are defined and cannot be changed outside the model.

Ember also has a pretty well-defined architecture out-of-the-box which means that we do not have to worry about looking up specific style guides. The Ember CLI takes care of all of this for us and there's no question of where to go to find a template, component or model.

Aurelia

Aurelia probably has one of the most passionate communities compared to the other frameworks that I approached here. No matter where you go you have passionate Aurelia fans that advocate for the library. The biggest point of attraction is the standardized approach that the framework takes. Everything you do in HTML and JS follows the latest standards, making the library very non-invasive.

Here are Aurelia's stats:

10K+ stars on GitHub

25+ thousand NPM downloads per month

1,641 downloads of Aurelia Inspector for Chrome

Why should a team pick up and start using Aurelia? First off, the structure of an Aurelia application follows the MVVM pattern, with a tie between the View and ViewModel creating the idea of a component. This gives us a nice pattern to work with, something that desktop developers (from WPF mainly) as well as JavaScript developers that have been around for some time can enjoy.

Aurelia aims to not be a monolithic library, so it's super easy to drop it in an application and start kicking things off from there. There's no need to set up and work with a loader like Webpack (although you can if you'd like) and working with Aurelia can be as simple as adding in a reference to a single JS file.

As already mentioned, Aurelia is standards-based. You're not learning some unique flavor of JavaScript or HTML. Aurelia uses ESNext or TypeScript when writing all of its modules, which means we can use the ${ ... } syntax for interpolation within template tags when setting up all of our views for binding.

It's not easy having to pick between all of these frameworks, but hopefully what I covered in this blog post along with the sample projects can provide some assistance when evaluating which framework to pick with your future projects. Feel free to refer to each of the sample apps that my GitHub projects provide and play around with them to take each of them for a spin!

JavaScript Developer Tools

Whether you build applications in jQuery and JavaScript or use AngularJS, Angular, React or Vue, you can count on our complete JavaScript UI component library, Kendo UI. It allows you to quickly build eye-catching, high-quality, high-performance responsive web apps using your framework of choice. Download your free 30-day trial today to see how quickly you can build your next frontend project.

# data[].attributes.attachment_link.title
Choosing the JavaScript Framework for Your Next Enterprise-Grade App

# data[].attributes.attachment_link.description
Gain insight into choosing the right JavaScript framework for your next enterprise-grade app. Learn about Angular, React, Vue, Ember and Aurelia.

# data[].attributes.attachment_link.readable_text
I spend a good deal of time thinking about JavaScript frameworks. One thing that I've been considering lately is if the default choices - React and Angular mostly, but also Vue - are really the best choices for many of the projects that end up using them. What follows are some of my thoughts as I work through that question.

I've created a few hypothetical scenarios below that will hopefully illustrate the trade-offs that can arise when evaluating frameworks. They are loosely based on real situations I'm familiar with, and I'll tell you now that there isn't a "best" framework. It's about which one is best for your project and your team.

There is something called the project management triangle that will help frame our conversation. It's illustrated in the graphic below:

The general idea is this:

1. The quality of work is constrained by the project's budget, schedule and scope.

2. There are trade-offs between constraints. For example, a shorter schedule will increase costs, reduce scope or lower quality - or some combination of those. If one thing changes, something else has got to give.

As we go through these scenarios, we'll see how these trade-offs come into play with our choice of software. In particular, we'll see how the framework we choose might impact cost, schedule or quality.

Nobody Ever Got Fired for Buying IBM

There is an old saying that goes, "Nobody ever got fired for buying IBM". Several decades ago, this phrase was used to indicate that many organizations are risk averse and will often choose the option with the best track record, regardless of other factors. There is a lot of this that goes on with JavaScript frameworks.

It's understandable, too. Imagine you're the one choosing the technology a large front end project will use. It has a budget of $750,000. Now look at the project management triangle above and note the bottom two corners - cost and schedule. If you're worried about keeping a handle on those two factors, which feels like a safer bet - choosing React or going with Svelte?

With React, you know there will be abundant training resources, lots of experienced developers available if you need to grow your team, and a large ecosystem that can help accelerate development. Those advantages can help you keep both the project on schedule and control costs. That safety explains why a lot of projects stick with React (and Angular), but as we'll see, many - but certainly not all - would benefit from making other choices.

The Java Team Branching Out

Let's imagine a hypothetical team of Java developers that are going to build a front end for a large project at their company. Yes, they're back end devs, but they're smart and have proven themselves on big projects before. Plus, they want to do the project. When upper management talked about bringing an agency in to help, the team lobbied against it. They could handle it in-house, they said.

This sort of thing actually happens, and when it does, it introduces some additional risks. The choice of framework here is important because choosing one that will slow the team down will likely blow up the schedule, and because they aren't well-versed in front end, they'll be slower anyway. Not good. Project schedules are fantastical enough as it is.

The team was aware of these risks, so they wanted to go with a well-established framework - the safety thing - and I don't blame them. The two choices they narrowed it down to were React and Angular. Which one should they choose?

The Smart Choice

For this team, the choice is clear - Angular. There are a couple of reasons. The first is that React is famously, "just a view library". There are going to be a lot of decisions that need to be made by this team if they pick React. Which state management solution will they use? What about routing, http, and everything else? Does anyone know how to configure webpack? With Angular, all of these decisions are made for you. One major obstacle averted.

Since this is a large project, this team will probably end up picking Redux as the state management library. Some people argue that paradigms don't or shouldn't matter that much. In my experience, however, they do matter. A team of Java developers will be very well-versed in object-oriented programming techniques. Redux, a functional library, will probably slow them down.

Paradigms like object-oriented or functional programming, help developers form mental models and shortcuts that they use to solve common problems more quickly and with fewer bugs. When you adopt a new paradigm, many of your shortcuts are gone and you may find yourself struggling with the new patterns and unfamiliar syntax.

The scenario outlined above is based on an article I read about a team of C# developers who took on a React/Redux project and struggled. Their big problems were understanding the patterns and best practices they should be using. If that team had chosen Angular, which generally encourages an object-oriented approach, I doubt they would have had as many difficulties. They would have been working in a familiar paradigm, with well-defined patterns, and with much of the required functionality provided for them.

The point here is that when picking a framework, the skills of your team matter, particularly if the schedule is tight. If your schedule is looser, experimenting can have some big advantages, but beware of the added risks.

The Need for Speed

Our next scenario involves a client services team that is experienced in building React applications. They have a good boilerplate that they can use to get off to a fast start and they are highly confident they can solve any problems that arise both quickly and effectively.

The client, however, has said that their highest priority is performance. The app has to load quickly and it has to perform well on slow mobile networks. Should they use React?

Probably not.

If we think back to our project management triangle, we feel confident that our team will be able to produce a React app on budget and on schedule. But what about the quality? That's a slippery thing, isn't it? Because what do we mean when we talk about quality? The app will no doubt be put together well. It will be a fine React application. But will it best meet the most important client criterion, performance?

You can definitely make a pretty fast React app. I do it regularly in my work at a client services agency. But you will be able to deliver more value - a higher quality product - in this case if you choose a different framework or library. Why is this so?

Performance First?

In recent years there have been a lot of case studies that demonstrate that even modest performance gains can give a big boost to important business metrics - conversion rate, revenue, time on site, and other measures. Basically, more money, donations or whatever else is important.

Addy Osmani published a case study a while back about a hotel chain in India that converted their site from React to a progressive web app (PWA) using Preact. Obviously a PWA is going to provide benefits beyond whatever framework you use, but the move to Preact, "...was responsible for a 15% improvement in time-to-interactive alone."

Who wouldn't want a 15% improvement in time-to-interactive? And if you're not familiar with Preact, it's a 3KB library with the same API as React and improved performance is its main selling point. Having the same API as React makes it very attractive and there is even a companion library called preact-compat that allows you to use almost all libraries in the React ecosystem.

Some time after reading the case study from Addy, I saw this tweet from James Kyle:

Serious Q: How many of you can confidently give a reason for not replacing React with Preact in your app that doesn't amount to laziness?
- Jamie (@jamiebuilds) January 17, 2018

Admittedly, James was drunk at the time of that tweet (his words, not mine), but I still think he had a pretty good point. There were some good answers as to why some folks needed React, but not many. I think James is wrong about it being down to laziness, however. It's that IBM thing...the safe bet, the long track record.

Considering what we know about the benefits of performance, why not make it the top line consideration for all projects? Start with fast and let other considerations fight for the spot at the front of the line?

And this is not a bash on React! Preact exists because of React. And I'm just using Preact as an example here. You could go with Inferno, Svelte or perhaps a couple others.

The point in this scenario is that the safe bets - React, Angular and even Vue - come with a trade off. They aren't the fastest frameworks. Are they fast enough? That depends on the project. They may very well be fast enough. There are also a lot of other considerations besides speed that may push their way to the top.

Imagine that our client in this situation wanted a very fast app, but the schedule was extremely tight. Maybe it's even tied to a hard deadline like a television broadcast or music festival. I've worked on a project like that, and that changes things a bit, doesn't it?

I'm sure you can think of many other complicating factors. The point here is that the safe bet isn't always the best choice. Not prioritizing performance may leave some money on the table. Maybe a lot of money.

I Love Shiny Pennies

Next scenario. A client has come to me and they want a fast site, but they have a really tight deadline. I've seen the client's analytics and I know they will get huge value if we build them the fastest site possible. I recommend Sapper.

What the hell is Sapper, you ask? Well, scenario aside, Sapper is a real framework built on Svelte. I have a bit of a crush on it. It's shiny and new - and super fast. You can read more here, but the relevant point for our scenario is that Sapper is not a mature framework at this time.

As the deadline approaches, some problems arise. Perhaps Sapper has a few bugs that are slowing development. Maybe I don't quite know what I'm doing with it because it's new. Probably a bit of both. I've blown the schedule. I start to question my life choices and break into a cold sweat before every client call. I've descended into the fifth hell of software development and it's entirely my own fault.

It's a very unpleasant scenario. This sort of thing happens, though. It's part of the reason why people go with the safe bets. The point here is to balance performance with other factors - framework maturity, the experience you and your team have with it, among other factors. It can save you a lot of pain.

Big Fish, Little Fish

I know most of you reading this will choose one of the big three - React, Angular and Vue. That's cool and I totally understand. They're all great and I use React everyday at work. There are good reasons for choosing them. However, one point I hope you'll take away from this discussion is that there are some lesser known frameworks out there that deserve more consideration than they get. And using them could yield some major benefits.

Hopefully the Sapper example didn't traumatize you, because picking Preact or Inferno is actually pretty low risk for a React team, and they can deliver real gains. 💰 In time, I'm confident Sapper will be a great choice as well. If your deadline allows, using a spike to evaluate your options is time well spent.

If you've enjoyed this post, sign up for my weekly newsletter. I curate the best JavaScript writing from around the web and deliver it to readers every Thursday. The sign up form is right below this article.

Until next time, happy coding...

# data[].attributes.attachment_link.title
Some Thoughts on Choosing the Best JavaScript Framework for Your Project

# data[].attributes.attachment_link.description
I spend a good deal of time thinking about JavaScript frameworks. One thing that I've been considering lately is if the default choices - React and Angular mostly, but also Vue - are really the best choices for many of the projects that end up using them.

# data[].attributes.attachment_link.title
How to Choose the Best Front-end Framework

# data[].attributes.attachment_link.description
Keep these five aspects in mind when choosing a front-end JavaScript framework for your next web project.