Transcription
EVERY THINGYOUNEEDTOKNOWANE D U C AT E DDECISIONYOURTOMAKEABOUTTECHNOLOGYSTACKANGULARVS REACT.JSVS VUE.JS Our evaluation of UI Frameworks, Tools& Technologies2019
What’s inside?1Preface32Angular, ReactJS & Vue JS - Comparison43Angular, ReactJS & Vue JS - Pros & Cons64Angular, ReactJS & Vue JS - Conclusion115UI 222Are you a front-end superstar, excited to build feature-rich beautiful UI? Join Us
STATE OF FRONTEND TECHSTACKS 2019PREFACEPrefaceThe only constant in the web frontend developmentlandscape is that it is in constant flux year after year. So, itbecomes paramount to reevaluate the tools, frameworks,libraries and practices after every few quarters. As of this writing mostof the web frontend development happens in either Angular, ReactJSor VueJS. Compared to our previous evaluation in 2018 which only hadAngular and ReactJS as major players, now, we also have VueJS withsignificant traction.As always a direct comparison between Angular, ReactJS and VueJSalone will not be sufficient. So, it will not be an individual comparisonbut a comparison of their respective ecosystems on the whole.3Are you a front-end superstar, excited to build feature-rich beautiful UI? Join Us
Angular, React.JS &Vue.JS - ComparisonIn this section, we compare all three frameworks using aplethora of parameters to highlight how they fare againsteach other.
STATE OF FRONTEND TECHSTACKS 2019COMPARISONReactJSAngularVueJSTypeJavaScript FrameworkJavaScript LibraryJavaScript LibraryUsed forWeb development andHybrid mobile appdevelopment (Ionic)Web development andNative mobile appdevelopment (ReactNative)Web development andHybrid mobile appdevelopment(Onsen UI)Maintained byGoogle & CommunityFacebook & CommunityCommunityCoded inTypeScriptJavascript (Alsosupports Typescript)Javascript (Alsosupports Typescript)Steep learning curveEasierEasiest among the threeRanked 4thReact is ranked 2nd onthe list of hottestJavascript projects onGitHubRanked 1st, Vue.js wasthe trendiest projectin 2017.FrontendPerformanceFast (Slowest of the lot)FasterFasterGitHubContributors /Stars821 / 444081268 / 120028251 / 125271Browser renderingShadow DomVirtual DOMVirtual DOMBootstrappingAngular-cliCRA (Create React App)Vue-cliDebuggingEasy to debug HTMLand JSEasy to debug the JS butdifficult to debug theHTMLEasy to debug HTMLand JSError handlingCompile-timeRuntimeRuntimeKey Features- HTML-based template- RxJS- Shadow DOM- Service Worker Support- Ivy: New RenderingEngine- Bazel Compiler- One-way data bindingwith props- Stateful components- Virtual DOM- JSX (JavaScript XML)- Architecture beyondHTML- HTML-based template- Reactivity- Reusable Components- Transitions- Routing- IntegrationsEase of Learningsince it is an end to endframework.Popularity
Are you a Front-EndSuperstar?Are you excited to build feature-rich beautiful UI? Do you love to dabble inthe latest cutting-edge tech? Then, Ideas2IT is the right place for you.Over the past 10 years, we’ve extablished ourselves as innovation partners toforward-looking companies.Interested? Apply today and accelerate your career growth.Join UsAt Ideas2IT, thesky is the limit!
Angular, React.JS &Vue.JS - Pros & ConsLearn about the benefits of each framework. This is basedon the latest release for each framework.
STATE OF FRONTEND TECHSTACKS 2019ANGULAR VS REACT JS VS VUE JSAngularThe latest version of Angular is 7. It comes with a new, significantlysmaller rendering engine.Benefits of AngularOpinionated, full-fledged E2E framework. Easy to maintain thecode.Two-way data binding avoids developer intervention.Out of the box server side rendering (SSR) with cache supportreducing CPU load.The framework is designed to be highly testable.Use of directives, components and elements helps in cleanlyorganizing the code.Angular CLI makes it easy to follow the best practices as aproject grows.Drawbacks of AngularIt has slow initial loading times and still struggles with complexfrequently changing pages. However, SSR alleviates theproblem though.The opinionated code organization actually makes it difficult tohandle the scopes of complex entities.The community support is slowly waning.7Are you a front-end superstar, excited to build feature-rich beautiful UI? Join Us
STATE OF FRONTEND TECHSTACKS 2019ANGULAR VS REACT JS VS VUE JSReactJSReactJS has not matured any further after the previous evaluation.Benefits of ReactJSEasier to learn.Unopinionated and highly flexible. It even supports Typescript.Virtual DOM implementation makes it one of the fastest clientside renderer available.Unidirectional data flow prevents parent from being affected bychildren.Great community provides it with a lively ecosystem ofoff-the-shelf components.It is relatively easier to migrate between versions.Create-react-app makes it simple to create a new applicationfrom scratch.Drawbacks of ReactJSOfficial documentation still remains poor.Since there are lots of off-the-shelf components to choose fromit becomes the responsibility of the developer to evaluatethem.Since it is a view only framework, it requires considerable effortto integrate with other layers of MVC.8Are you a front-end superstar, excited to build feature-rich beautiful UI? Join Us
STATE OF FRONTEND TECHSTACKS 2019ANGULAR VS REACT JS VS VUE JSVueJSVueJS is gaining lots of traction in recent months. It is usually laudedfor its performance and simple lightweight APIs.Benefits of Vue JSSuper small library. It is barely 8KB after al-DOMcompiler and even the run time.Outperforms bulky frameworks like Angular and Ember.js.Ease of understanding and development.Easier to debug, saving lot of time for developers.Useful for building entire applications or even replacingexisting applications partially.Like ReactJS, its Virtual DOM implementation makes it one ofthe fastest client side library.Drawbacks of Vue JSDevelopment is done by a closed community which ispredominantly chinese causing language barriers.Being unopinionated and flexible means developer has to bearthe responsibility for cleaner, maintainable code.9Are you a front-end superstar, excited to build feature-rich beautiful UI? Join Us
Angular, React.JS &Vue.JS - ConclusionLearn which framework wins the race and why.
STATE OF FRONTEND TECHSTACKS 2019ANGULAR VS REACT JS VS VUE JSConclusionWhat we just saw is the current state of the above libraries orframeworks. Last year ReactJS was the chosen choice for frontendweb development. Like we noted back then it is a temporary choice.Though ReactJS is still competitive our choice would be VueJS.Yes, in last one year there were changes in Angular and ReactJS butthey were just evolutionary and not revolutionary enough toovercome the traction which VueJS was able to garner in the sameperiod. VueJS coupled with its performant, low-barrier-to-entry APIand a rallying community is clearly the ecosystem of choice.Needless to say - for the time being.11Are you a front-end superstar, excited to build feature-rich beautiful UI? Join Us
Our evaluation of UIFrameworks, Tools& TechnologiesThe following is a compendium of the current UI Frameworks,Technologies, Tools and Techniques that were most interestingto us. This choice is based on feedback from our engineersbased on their daily work and experiences.Introducing Ideas2IT’s UI Technoverse
Ideas2IT’s UI Technoverse at a glanceOpen interactive versionFrameworksTechnologiesToolsOpinionated and un-opinionatedOpinionated and un-opinionatedOpinionated and un-opinionatedframeworks or even languagesframeworks or even languagesframeworks or even languageswhich drive the way in which anwhich drive the way in which anwhich drive the way in which anapplication could be developed.application could be developed.application could be developed.orkswemaFrP5 JSReason MLThree JSOnsen UIVue JSMaterial UICapacitorHTTP2PWALighthouseEnzymeHeadless ChromeWeb AssemblyWorkboxFlowologiesTechnELMAMPWeb/Browser PushNotificationsPuppeteerPolygot JSFlutterRXJS6ToolsIdealParcelUsefulNot readyAvoidWhy aren’t you usingUse if applicable toPromising but notThe heading says itthis already?your projectthere yet.all! Steer clear.
STATE OF FRONTEND TECHSTACKS 2019UI TECHNOVERSEFrameworksOpinionated and un-opinionated frameworks or even languages whichdrive the way in which an application could be developed.1.CapacitorIDEALCapacitor is a cross platform application development toolkit. It can beused to generate hybrid applications for iOS and Android; and desktopapplications for Windows, MacOS and Linux using Electron. It can besafely considered as a shared superset of Cordova and Electron. LikeCordova and Electron, it provides a plugin API which in turn providesaccess to the native OS functionalities like camera, GPS, Pushnotifications, etc. As of version 4 of Ionic platform, all hybridapplications internally use Capacitor. It is highly recommended toevaluate and use Capacitor in any new hybrid development.2. Material UIIDEALCapacitor is a cross platform application development toolkit. It can beused to generate hybrid applications for iOS and Android; and desktopapplications for Windows, MacOS and Linux using Electron. It can besafely considered as a shared superset of Cordova and Electron. LikeCordova and Electron, it provides a plugin API which in turn providesaccess to the native OS functionalities like camera, GPS, Pushnotifications, etc. As of version 4 of Ionic platform, all hybridapplications internally use Capacitor. It is highly recommended toevaluate and use Capacitor in any new hybrid development.14Are you a front-end superstar, excited to build feature-rich beautiful UI? Join Us
STATE OF FRONTEND TECHSTACKS 20193. Vue JSUI TECHNOVERSEIDEALVue JS is one of the lightweight frameworks for building progressiveweb applications. In web applications, smaller the payload size, betterthe responsiveness. Vue is sized around 20KB, which is much smallerthan its counterparts like React and Angular. Though it started out slow,it has gathered enough traction to be widely supported by thecommunity. Also, it has very good documentation. It is a good time tomake use of Vue JS.4. Onsen UIUSEFULOnsenUI is a hybrid mobile app or mobile web app developmentframework. The USP of OnsenUI is that it allows development usingdifferent frameworks/libraries such as jQuery, Angular JS, Angular,React JS, Vue JS. This makes developing an OnsenUI app very simplebecause we would be leveraging our existing knowledge. Like othersimilar frameworks, it also provides mobile-optimized UI componentswhich mimic the native look and feel. OnsenUI is supplemented by thecommercial tool Monaca which provides all bells and whistles to build,test and deploy to end users.5. Three JSUSEFULThree JS is a lightweight open source javascript library for creating 3Dweb graphics and animations within the web browser. It primarily workson canvas elements, SVG elements, and uses WebGL for rendering. Itsupports many special effects and filters including particles, lensflare,sprites, real-time reflection and refraction, and even area-based lighting.Three JS is compatible with almost all modern browsers. Most of its15Are you a front-end superstar, excited to build feature-rich beautiful UI? Join Us
STATE OF FRONTEND TECHSTACKS 2019UI TECHNOVERSEfeatures can be leveraged using less amount of code and it also hasgood documentation with sufficient examples. Three JS releases a newversion about once a month, and the API can change at any time. Thisimplies a lot of outdated solutions and references. However, it is a goodchoice for the feature set it provides.6. ElmNOT READYElm is a functional programming language that promises no run-timeexceptions through it’s intelligent type inference and its functionalprogramming paradigm. To draw parallels, Redux has been majorlyinspired by Elm’s model view architecture. It is lightweight, robust andfaster with lesser asset size compared to other available frameworks. Ithas its own package manager which has ample amount of support. InElm, every data is immutable and it relies on pure functions to handle thisimmutability. However, Elm is still in its earlier stages. It has a growingcommunity which acknowledges the vast family of problems it can solve.Elm seems to have a good potential in future and it can be used as agateway to master functional programming.7. Reason MLNOT READYReason, developed by Facebook, is syntactic sugar over OCaml.Bucklescript serves as the wrapper. The USP of Reason is that Bucklescriptcan compile to both Javascript and assembly. It brings in all the benefitsof OCaml like strong typing, immutable data and functional orientation. Inthe long term, Facebook wants to make use of Reason for cross-platformnative development. However, in the interim, it can only be used for theJavascript generation. In theory, Reason shows promise but it is still a workin progress.16Are you a front-end superstar, excited to build feature-rich beautiful UI? Join Us
STATE OF FRONTEND TECHSTACKS 20198. P5 JSUI TECHNOVERSEAVOIDP5 JS a JavaScript library which has a full set of drawing functionalities.However, it is not just limited to drawing in a HTML5 canvas. A huge listof addons can be used to make the visuals interact with HTML5 objects,including text, input, video, webcam, and sound. Though P5 JS can beused for quick prototyping, it is not production ready when it comes toperformance.17Are you a front-end superstar, excited to build feature-rich beautiful UI? Join Us
STATE OF FRONTEND TECHSTACKS 2019TECHNOLOGIESTechnologiesInnovations which re-imagine and rewrite the way we developapplications to achieve age-old development goals such as fasterdevelopment time, better performance, ease of maintenance, etc.1.PWAIDEALA Progressive Web App or PWA is a web app that uses modern webcapabilities to deliver an app-like experience to users on the device.They are installable and live on the user's home screen, without theneed for an app store. They offer an immersive, full-screen experiencewith help from a web app manifest file and can even re-engage userswith web push notifications. When launched from the user’s homescreen, service workers enable a Progressive Web App to load instantly,regardless of the network state. A service worker, written in JavaScript,is like a client-side proxy and puts you in control of the cache and howto respond to resource requests. The programmatic API allowsdevelopers to decide how to handle caching and provides a much moreflexible experience than other options. It definitely improves web usagein devices and the user experience. It is recommended to use PWA if anapplication can leverage its benefits.2. AMPUSEFULAccelerated Mobile Pages (AMP) is an initiative which envisionshigh-performance mobile pages. Creating an AMP page involvesfollowing a set of guidelines, including the AMP library and using someAMP-specific HTML tags. This ensures that best practices for resource18Are you a front-end superstar, excited to build feature-rich beautiful UI? Join Us
STATE OF FRONTEND TECHSTACKS 2019TECHNOLOGIEScaching and delivery are followed and enforced. Also, Google providesthe AMP Cache which acts as a Content Delivery Network (CDN) forAMP compatible web pages. Usually, AMP pages are well suited forstatic content pages like blogs. It would be highly recommended to useAMP for applicable pages and gain massive performance (and SEO)benefits.3. HTTP2USEFULHTTP has been the text based protocol powering the internet revolution.Internet over the decades has evolved massively. HTTP1.1, which we useby default, has started to show its age and limits. HTTP2 is a majoroverhaul of HTTP1.1. For starters, it is a binary protocol which brings inbenefits of a TCP socket like having more than one data stream sharing asingle connection, which alone single handedly makes the protocol muchmore efficient than the previous version. It also natively supportsstreaming. Most modern browsers and web servers support HTTP2. Wecan take up a strangler approach in moving to HTTP2, one feature at atime.4. Web/Browser Push NotificationsUSEFULWeb/Browser push notifications is an upcoming web feature which bringsthe Android and iOS push notifications to the browsers. At the moment,the browser support is limited to Chrome, Safari and Firefox. Also, theunderlying implementations differ widely between the platforms andbrowsers, which translates to browser specific development. However,when properly used, it provides very good end user experience. So, it isrecommended to use Web Push Notifications to augment the userexperience wherever applicable and feasible.19Are you a front-end superstar, excited to build feature-rich beautiful UI? Join Us
STATE OF FRONTEND TECHSTACKS 20195. Web AssemblyTECHNOLOGIESNOT READYWeb Assembly (WASM) is a new standard for binaries which can beexecuted as-is in a browser. It is a precompiled binary format which bringsin benefits like smaller size and ‘native code’-like performance. It willexecute in a sandboxed virtual machine, honouring all permissions andsecurity model of JS execution. Also, it can be accessed from JS code.Currently, there is tooling support to compile C/C /Rust code to WASMformat. At the moment, there is not much browser support and thereforeWASM is not ready for mainstream use but it can power future webapplications with AR and ML use cases.20Are you a front-end superstar, excited to build feature-rich beautiful UI? Join Us
STATE OF FRONTEND TECHSTACKS 2019TOOLSToolsAids which facilitate development by providing solutions for specificuse cases such as Hot Module Reloading, evaluating quality of webpage, facilitating, testing, etc.1. LighthouseIDEALLighthouse is a tool to evaluate the quality of a web page. Once a pageis evaluated, it provides a report highlighting the various facets of thewebpage like security, functionality, performance, accessibility, offlinesupport, etc. It was originally developed to evaluate Progressive WebApps but it can be used in all the cases. It can be executed fromChrome as an extension, from command-line and from nodeapplications programmatically. Also, the reports can be directly savedas gists. Considering the value Lighthouse provides, it is anindispensable tool for web developers.2. WorkboxIDEALWorkbox, as the name suggests is a toolbox, from Google, whichmakes PWA development easier. It provides a set of utility functionswhich could be used in a Service Worker. It makes actions like caching,prefetching, background syncing, etc, simpler. It also has a CLI whichcan be used to generate the service worker itself. It can be augmentedwith new features using plugins. Workbox is absolutely necessary ifservice workers are used in an application.21Are you a front-end superstar, excited to build feature-rich beautiful UI? Join Us
STATE OF FRONTEND TECHSTACKS 20193. EnzymeTOOLSUSEFULEnzyme is an open source JavaScript testing framework developed andmaintained by Airbnb. It makes testing React applications easy with aminimal setup cost. It also makes it easier to assert, manipulate, andtraverse any React Components' output. It works with Browserify,Webpack, JSDOM, Jest, Karma, Mocha, etc. It keeps the code baseclean with reduced boilerplate code. We would encourage all Reactapp developers to use this library.4. FlowUSEFULJavascript is a weakly typed dynamic language. Though it makes itsimple to code, it introduces complex, esoteric bugs during execution.Adding strong typing to Javascript has been attempted by many. Themost famous one is Typescript from Microsoft. Flow is one such statictype checker from Facebook. Similar to Typescript, using Flow meanswriting non-standard Javascript and using a transpiling step to generatevalid javascript. However, Flow also supports type annotations beingadded as part of comments, which makes it an ideal choice to augmentexisting code bases. Also, the ideology behind Flow makes it easier tointegrate with React projects. Since type checking the existing code ismade easy with Flow, it is an imperative and soft option for Javascript.5. Headless ChromeUSEFULEnd to end automation testing is usually done in a headless Chrome/Safari/Opera, usually some headless browsers which leverageWebkit/Blink like Phantom JS, Slimer JS, Trifle JS, etc. are used. Starting22Are you a front-end superstar, excited to build feature-rich beautiful UI? Join Us
STATE OF FRONTEND TECHSTACKS 2019TOOLSfrom Chrome v59, a new headless mode is supported natively. UsingHeadless Chrome intuitively increases the reliability of the automationsuites since it is the actual browser and not some emulation of it. It isrecommended to use Headless Chrome to replace the likes ofPhantomJS.6. Polygot JSUSEFULPolyglot JS is an internationalization (i18n) library developed by AirBnb. Ithas zero dependency and it can work in both browser and node JS. Itdoes not provide translation but helps in managing translated literalsacross multiple locales. As expected in an i18n library, it providesinterpolation of string literals. The specific strength of Polyglot is that itmakes it easier to handle pluralization, which is one of the most commonproblems in i18n. It is recommended to use Polyglot JS in any applicationwhich needs multi lingual support.7. PuppeteerUSEFULPuppeteer is a chromium-only equivalent to Selenium Webdriver. It usesthe Chromium debug protocol to invoke and control Chromium/Chromeinstances. By default, it executes in a headless mode but it can bedisabled during development/debugging of Puppet scripts. Due to itstight integration with Chromium, it can provide granular control whencompared to alternatives like Selenium Webdriver. Also, the barrier toentry is low since the Puppeteer scripts are similar to Selenium scripts.However, Puppeteer is not limited to automation testing alone. It can alsobe used for Web Crawling.23Are you a front-end superstar, excited to build feature-rich beautiful UI? Join Us
STATE OF FRONTEND TECHSTACKS 20198. RXJS 6TOOLSUSEFULRxJS has been a library of choice to make use of Observables.Observables make it easy to handle multiple asynchronous events in anapplication. Until Observables becomes a feature of Javascript, librarieslike RxJS is required. RxJS is being used internally in Angular fromversion 2.0. RxJS 6 comes with a newer and simpler API and also theability to include only the part of the library which will be used. Themain use cases of RxJS are streaming existing data, generating data,interoperation between existing APIs, and combining and selectingfrom existing streams. The disadvantage with RxJS is that it requires aparadigm shift in the way applications are designed. However, it is agood investment to make use of RxJS since the methodologiesintroduced are generic.9. FlutterNOT READYFlutter is a native mobile application development toolkit by Google,which is used to develop applications for Android and iOS. It isGoogle's answer to React Native. Flutter applications are written in theDart language. It comes with a huge set of UI widgets which can beused to create fluid and intuitive UI. Naturally, based on the platform,the app can use different styles for the UI (like Material Design,Cupertino [iOS specific style]). Flutter provides the usual benefits todevelopers like common code base, Hot Module Reloading, etc. At themoment, Flutter is still in preview, but it looks promising. The officialrelease followed by community traction could make it a go-todevelopment platform for Mobile Development.24Are you a front-end superstar, excited to build feature-rich beautiful UI? Join Us
STATE OF FRONTEND TECHSTACKS 201910. ParcelTOOLSAVOIDParcel is a web application bundler with the USP of zero configuration andfast multi-core compilation. It provides the features of most modernbundlers like Hot Module Replacement, integrations with transpilers,development server, etc. It is still being developed to become a scalable,plugin-supporting system and to allow optional configurations. ThoughParcel can be used for quickly bootstrapping an application and zeroconfiguration looks good on the paper for most applications, it is notpractical enough. Moreover, Webpack 4 also promises all the USPs ofParcel. So, it is recommended to stick with existing bundlers for now.25Are you a front-end superstar, excited to build feature-rich beautiful UI? Join Us
Are you a Front-EndSuperstar?Are you excited to build feature-rich beautiful UI? Do you love to dabble inthe latest cutting-edge tech? Then, Ideas2IT is the right place for you.Over the past 10 years, we’ve extablished ourselves as innovation partners toforward-looking companies.Interested? Apply today and accelerate your career growth.Join UsAt Ideas2IT, thesky is the limit!
STATE OF FRONTEND TECHSTACKS 2019IDEAS2IT Ideas2IT, June 2019Ideas2IT is a close-knit team of 250 expertsoffering Web & mobile developmentfor startups and businesses.www.ideas2it.comsales@ideas2it.com
www.ideas2it.com
Benefits of Angular STATE OF FRONTEND TECHSTACKS 2019 ANGULAR VS REACT JS VS VUE JS Angular The latest version of Angular is 7. It comes with a new, significantly smaller rendering engine. Opinionated, full-fledged E2E framework. Easy to maintain the code. Two-way data binding avoids developer intervention.
