14807 Views | 22 Min Read
Front End Frameworks
- 475k websites on the web are powered by React.
- Github – 120.5k stars, 21k forks and 1200 contributors.
- High performance – React is renowned for its high efficiency and flexibility. It can be easily integrated with other frameworks without any hassle. Can be used for both client side as well as server side.
- Abundant Resources – As react is maintained by Facebook, there is a huge trove of documentation and resources available on the web which makes learning curve of react much smoother than its chief rival AngularJS.
- Backward Compatibility – Transitioning or migrating from older to new versions is fairly easy in react using CodeMods.
- Easy to maintain component structure – Component based architecture helps to increase reusability to code and ease of maintenance in large scale projects.
- Rich community – React has close to 1300 contributors on GitHub which is more than any other library/framework.
- Unidirectional Data Flow – One way/Unidirectional downward only data binding in react via flux controls helps to make sure that any changes made to child element structure don’t affect the parent element structure
Cons Of Using REACT
- Bloated and complex – Many developers might find react too complex and bloated for their purpose as compared to Vue JS. Added complexity that coms align with react might be unnecessary for small scale projects
- JSX – The use of JSX adds another layer of complexity. JSX is a pre-processor, it adds XML syntax extension to JS. Although JSX helps to code react in a safer and faster manner, it is difficult to grasp for new developers.
- Need for Assembly-Tools – React requires a wide array of assembly tools to function properly and be compatible with other libraries and frameworks.
- SEO problems – webpages built with react are known to face issues with indexing by search engine crawlers/bots.
Netflix, Yahoo, Airbnb, Instagram, Facebook, WhatsApp , Sberbank, PayPal, Microsoft, BBC
The key focal point of attraction of Vue is its progressive nature which helps it to adapt to developer’s needs. It is built on concepts from other frameworks and libraries like angular and react and offers a compact lightweight solution incorporating all the best features and practices.
- 64k websites are powered by Vue.
- Github – 125k stars, 18k forks and 253 contributors.
- Fast Configuration: Vue has an inbuilt MVC model which makes configuration quick and easy compared to angular and react.
- Flexibility: Flexibility and modular nature of Vue helps developers with past experiences on other frameworks and libraries to quickly adopt Vue with minimal effort.
- Integration Capability: Vue can be used to build both SPAs and large-scale complex applications as well with easy integration with server-side frameworks like Laravel, Symfony Django etc.
- Transitions: Vue makes it easy to add transitions to elements when the are added or removed from the DOM.
Cons Of Using VUE
- Poor Support: Vue doesn’t offer a big resource collection to new users on a scale similar to that of angular and react. Considering a comparatively lower market share, developers who are new to Vue js might not find adequate support and resources.
- Small Community:: A large chunk of Vue developer community is from non-English speaking eastern European countries. Community engagement used to be fairly low, However that is expected to change in 2019 as Vue saw a mammoth rise in popularity by the end of 2018.
StackOverflow, 9gag, Adobe, Xiaomi, Grammarly, Alibaba
Angular is a front end web applications framework based on typescript. AngularJS or Angular 1 was built by google engineers when Misko Hevery and Adam Abrons and launched in 2010 while angular 2 was launched in 2016.
Angular enabled developers to build highly efficient and robust Single page applications rather than static HTML websites. Google completely revamped the original framework and released a radically different and improved typescript Angular 2. Angular 2 introduced component-based architecture, improved dependency injection, logging service and inter-component communication.
The latest current version 7 was launched in September 2018 and new updates are released every 6 months. Version 7 has introduced vast improvements in Performance, Angular Material & CDK, dependencies for Typescript version 3.1, RxJS 6.3, Node version 10. Virtual Scrolling and content projection have also been introduced.
- 350k websites on the web are powered by AngularJS/Angular2+ versions.
- Github – 44.5k stars, 11.5k forks and 840 contributors.
- Data bindingApart from 2-way binding, angular 2 and beyond support 3 other types of data-binding namely – one-way property binding, event binding and interpolation.
- Enhanced RXJS has led to lightning fast compilation time of approx. 2.9 sec and modified start HttpClient.
- Abundant resources and support: Google offers a rich treasure trove of resources and rolls out new updates and improvements every 6 months.
- Support for Progressive web applications: Angular is the first framework to integrate features for development of progressive web applications.
- MVVM (Model-View-ViewModel) allows developers to work on the same application and data pool in isolation.
- Native mobile app: NativeScript powered by angular enables development of native mobile apps for both iOS and android.
Problems with Angular.
- Difficult Syntax: Angular has made a big leap in terms of syntax complexity after adopting TypeScript in angular2 and beyond. Yet it poses a steep learning curve for anyone making a transition from vanilla JS or jQuery.
- Migration: It is complex to migrate from older angular version especially from AngularJS to angular 7.
- Knowledge of MVC: A crucial prerequisite for using angular is the need to have a thorough understanding of model view controller architecture
Upwork, Freelancer, Udemy, YouTube, Paypal, Nike, Google, Telegram, Weather, iStockphoto, AWS, Crunchbase.
- 7k websites on the web are powered by Ember.
- Github – 20k stars, 4k forks and 750 contributors.
- Ember templates: One of the most striking features of ember is templates which help to create stunning UI. Templates are coded with Handlebars language which drastically reduces the necessary code. Templates are updated automatically as soon as moderation is made to their underlying data.
- Ember CLI: Ember-CLI is a command line addon that is packed alongside Ember stack. Ember-CLI provides support for techs like Sass/Less, CoffeeScript, Handlebars etc.
- Ember is shipped with Inspector tool to helps with debugging
- Convention over Configuration: Ember is based on Convention over Configuration (CoC). This helps devs to focus more on functionality and building apps faster and worrying less about planning High performance
- Losing Market share: Ember has seen massive stagnation over past 5 years and faces obscurity in future. Big companies like Netflix and Airbnb have dumped ember and moved to other frameworks like react.
- Lack of Up to date resources: Ember has a very poor support offering due to a shrinking community and is plagued with outdated resources.
- Too complex to be implemented in small projects. Takes too much time to configure and use which eats away into productivity.
- In comparison to react and Vue, ember is extremely complicated and difficult to learn especially for beginners.
Apple music, Groupon, Vine, Twitch, Chipotle, Atlas.io, sitepoint
- 4k websites on the internet are powered by Polymer.
- Github – 20k stars, 1.9k forks and 140 contributors.
- Polymer.js enables developers to build their own custom HTML elements.
- Supports both One-way and two-way data binding.
- Cross browser compatibility: polymer was designed especially with keeping cross browser compatibility testing in mind.
Problems With Polymer
- Unlike its peers, it lacks server-side rendering.
- Not abundant resources: As compared to react Vue and angular, polymer has scarce resources available on the net and has a very small community which has shunted its growth in popularity .
Google Apps like youtube, play music, Electronic Arts, ING, Coca Cola, McDonald’s, IBM, General Electric
- 100k websites are powered by Express.js.
- Github – 42k stars, 7k forks and 240 contributors.
- Plugins: Unlike meteor.js that is plagued with poor plugin functionality, Express supports a wide variety of powerful plugins to assist developers.
- Robust: Not only is express.js minimalist and lightweight in size, it is less prone to errors.
- Reusability: Built in router in Express.js promotes code reusability to speed up workflow.
Problems With Express
- Tedious Nature: Express.js developers need to get involved in a lot of tedious manual tasks which can stretch development cycle.
- No Built in error handling: Express lacks one critical feature, it does not have built in error handling which can make debugging code very time consuming and slow down development time.
IBM, Uber, Paypal, Netflix, Airbnb Walmart ebay Linkedin
- 7k websites around the world are powered by Next.js.
- Github – 33.7k stars, 3.7k forks and 604 contributors.
- Armed with default server-side rendering.
- Automatic Code Splitting: Next supports automatic code splitting. This boosts page reload speed and it highly beneficial for better serp rankings
- Zero Setup: Next requires zero setup and is production ready right out of the box.
- CSS Support: Next.js is packed with styled-jsx which offers complete CSS support
- Supports Hot Code Reloading: loads only those DOM elements that have been modified and not the entire page.
Problems With Next
- Lack of support: As next JS is still premature and has been out for just over a year, it lacks the level of support that it is more mature and older peers enjoy.
Marvel, Invision, Nike, Docker, NPM, Magic Leap, Ticketmaster
- 19k websites are powered by Meteor.
- Github – 40.7k stars, 5k forks and 400 contributors.
- Extensive packages and libraries: meteor offers a wide array of official community libraries and smart packages which are highly reliable, up-to-date to enhance functionality and speed up development process.
- Helpful Community: Meteor has a vast community that offers extensive tutorials resources and an endless stream of documentations which helps beginners to easily adopt the framework.
- MongoDB: Meteor supports mongoDB database which is much better than traditional relational databases like SQL.
- Live reloading: Meteor supports live reloading of pages every time the code is modified and reloads only those DOM elements that have been altered and not the entire page.
- Native Mobile apps: Meteor can be used for building robust native cross platform mobile applications for both Android and iOS using the Cordova integration.
Problems With Meteor
- Branding – Meteor has seen a rapid decline in popularity with the majority of its users shifting to other more popular frameworks like react angular vue js for frontend and express.js and next.js for backend.
- Meteor has poor and complex integration compared to its rivals. Not suitable for beginners.
- Supports only MongodB noSQL database over much popular and widely used relational SQL database.
Mazda, IKEA, Honeywell, mtv, efounders, tech stack, hazeorid
Test Automation Frameworks
- Github – 23k stars, 3.2k forks and 800+ contributors.
- Lightning fast: Jest is extremely fast. Unlike Mocha Jest runs parallel tests to reduce test time and maximise performance.
- No configuration required: Jest works out of the box without requiring any complex set up configuration like mocha. Jest gets configured the moment a dev uses create-react-app to create their react application. Tests can either be placed inside _test_ folder or named with a .spec.js/.test.js extension
- Mocking Library – Jest comes with its own mocking library which is a huge advantage over mocha. It also has in-built spies and matchers.
Problems With JEST
- Not mature: Jest is the youngest testing library compared to its well established and mature competitors. It might not be suitable for larger projects that need various kinds of testing.
- Poor Support: Due to its young age, Jest comparatively has less community support and tooling resources than Mocha or Jasmine. Popular IDE like webstorm started did not even support just until the recent update.
Facebook, Instagram, Twitter, The New York Times, Glympse, Airbnb, Spotify
- Github – 17k stars, 2.3k forks and 400+ contributors.
- High Flexibility: Unlike Jest which comes out of the box with its own extensive mocking library, mocha gives users the liberty to pick any library or framework of their choosing according to their need and preference.
- Asynchronous Testing: Unlike its peers, Mocha supports asynchronous testing. In newer updates of mocha, users can omit callbacks necessary for the test completion in order to speed up the testing process.
- Installation Methods: Mocha offers multiple methods for installation, either locally or globally. It can also be used to run tests right in the browsers on the client side.
- Supports a wide range of browsers: when it comes to browser support, Mocha remains unparalleled. It also has the feature to run browser specific tests.
- Integration with Assertion libraries: testers can greatly accelerate their testing workflow by integrating Mocha with assertion libraries. Chai is the most popular assertion library being used.
Problems With Mocha
- Extensive Configuration: The biggest reason for the rise of Jest’s and overtaking Mocha as the most popular testing framework is because of extensive configuration that mocha requires to set up. Unlike Jest, it does not come with a mocking library of its own and therefore cannot be used out of the box.
- Snapshot Testing: A separate library called chai-jest-snapshot is needed to be integrated for using screenshot testing functionality.
Asana, coursera, Typeform, selluki, Droplr, Onedio
- Github – 14k stars, 2k forks and 180+ contributors.
- Easy to read descriptive syntax and low complexity.
- Jasmine still remains as the most popular choice to run tests in AngularJS.
- Can be deployed out of the box with minimum configuration and has its own assertion libraries which can be easily extended.
Jasmine does not depend on any other frameworks or libraries – it has no dependencies.
Problems With JASMINE
Growth hackers, Coderus, Ubiqua, Infoshare
Written by Nikhil Tyagi
22095 Views | 18 Min Min Read
22906 Views | 5 Min Min Read
17905 Views | 8 Min Min Read
15588 Views | 7 Min Min Read