Libraries and frameworks are one of the intense competitiveness on front-end development.
In these days, the meaning of FE dev is about what libraries or frameworks is using.
Every year new different projects appeared with their own features, but now we can roughly agreeing that Angular, React or Vue.js are the pioneers in this world.
This was proved by the survey result.
The nowdays FE dev can be illustrated as agonizing what is the best choice and taking a look of the current & future status will be a good starting point of your consideration.
React
Without doubt, React leads among others. Last year faced a difficult moment — the license issue — which could led loose the actual position, but treated well.
Also, React is the most wanted on job markets. This result shows clearly that React is surpassing others.
At Jan/2018, the create-react-app(CLI tool helping create React app), has been moved from the incubation to the official facebook repository.
https://twitter.com/i/web/status/955513652261482496
The version 16(codenamed ‘Fiber’) which was announced Sep/2017, improved SSR(rewrite of server renderer) and added the support of custom DOM prop and fragment. Also, the render method has been updated to return multiple elements.
Fragment looks like to be an empty JSX tag. It allows groping child nodes without adding new one and has been improved the usability on v16.2.
// fragmentsrender() { return ( <React.Fragment> // or Short Syntax: '<>' <ChildA /> <ChildB /> <ChildC /> <React.Fragment> // or Short Syntax: '</>' );}
Since Dec/2017, React started a new process to treat new features & suggestions via RFC(Request For Comments) inspired by Rust RFC.
New Context API
If you have experienced using React, is quite likely had the annoyance of through passing the top component’s status value to the lower in the React tree structure, known ‘prop drilling’.
This is one of the reason which state management libraries such as Redux or MobX comes to play.
Did you know? There’s a way to solve this issue using React’s API without using them. The ‘context API’.
But when you want to try using it, you’ll find “Why Not To Use Context” from the official doc and even more, it recommends not using.
If you’re still learning React, don’t use context
To solve, purposed a new experimental ‘Context API’ as the first RFC issue. The new API was included on the new v16.3 release.
Checkout more details:- React’s ⚛️ new Context API- Replacing Redux with the new React context API
Async Rendering
The ‘async rendering’ was raised from the basic question of “How to provide the best user experience among the differences of the computer power and net latency?”.
During the development of v16, there was a consideration on it, but couldn’t continued due to the potential backward compatibility, but the support will be added on the future release.
Dan Abramov(member of React dev team), did two demos called as ‘Time Slicing’ and ‘Suspense’ from his speech during JSConf Iceland last March.
The factors to be improved from the CPU and IO perspective.
Doing improvement on CPU side, is to filling gaps of the computer power difference. And the network side from IO.
Time Slicing(CPU)
Time Slicing, provides a generic way for high priority updates to not blocked from the lower priority.
Also it improves the responsiveness on lower performed devices by scheduling the complicated/difficult CPU jobs without the any intervention of the developer.
Suspense (IO)
Suspense provides a generic way to suspend and deferring component rendering from the asynchronous data loading.
It helps to get smoothness of the user experience(loading and rendering) without hurt from the async tasks(like REST, GraphQL API calls, etc).
Vue.js
2017 was an impressive and impactive year for Vue.js and similarly positioned as React and Angular as well.
Also became the most popular Front-End GitHub projects receving 40K stars last year.
Having the similarity as AngularJS, Vue.js can be an attractive alternative for AngularJS users.
This is some how persuasive having the consideration of:
- The migration to Angular is not that easy.
- Knowing the official support for AngularJS will end.
Evan You, the creator, talked about the similarity with AngularJS.
I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight without all the extra concepts involved? I was also curious as to how its internal implementation worked. I started this experiment just trying to replicate this minimal feature set, like declarative data binding. That was basically how Vue started.
What differs Vue.js from others?
Vue.js describes itself as “The Progressive JavaScript Frameworks”.
The core focuses on data binding and component as React and it get easier for whom knowing the basic web technologies like HTML, JS and CSS.
But when the application becomes complicated, is inevitable the necessities of helping tools like routing, state management, communication among components, etc.
Frameworks like Ember and Angular approach including all of these helpers on their own. Like React let these to the community ecosystem.
Vue.js takes as the middle. The core provide the minimal functionality. But of course, they provides officially maintained well made tools with docs also.
The ecosystem is growing
Nuxt.js which was inspired from the React based SSR universal webapp framework next.js(first appearance 2016), reached v1.0 on Jan/2018.
The vuetify, which helps build material design UI component, also reached v1.0 on Feb/2018.
The popular VSCode from MS, also started to support debugging functionality of Vue.js.
These changes makes attractive atmosphere for Vue.js more and more.
Prospectives
The powerful CLI tool vue-cli, which let configure dev environment, will release a new version soon.
On v3.0, the new targeted build option will be added. It’ll allow create easily with the three(App, Lib and Web Componet — and planned to add more w/community collaboration) targets. Also will have the ‘zero configuration’ support.
The current latest of the core is 2.5.x. Next minor release(v2.6), will support native ESM import, improved async error handling, iterator on ‘v-for’ directive and more.
Support of IE will be dropped starting the next version of 2.6(2.6-next or 3.0), having evergreen browser supports only.
Vue 3 is not going to be one of those “big change releases” — the main difference will be that Vue 3 only targets modern “evergreen” browsers (i.e. IE11 & below are out). ‐ Hashnode: AMA with Vue.js Team
Basically, the development of the next version will have the backward compatibility with the v2.6 dev in parallel. The codebase will have the newest ES specification also.
There’s no doubt predicting another great year 2018 for Vue.js. Many developers used to say about ‘Angular vs React’ before, but now most will be agreeing on ‘Vue.js vs React’.
Take a look "Why we moved from Angular 2 to Vue.js (and why we didn’t choose React" article for reference.
Angular
Following the every 6 months release schedule, the v5.0 was release Nov/2017. The coming v6.0, reached RC status and if follows the schedule, it expected to be released on April.
Last year Angular focused improving performance mostly. In this year will be expected to have adding new features and new different approaches as well.
Prospectives on the v6.0 changes
Ivy Renderer
The new backward compatible experimental renderer called ‘Ivy Renderer’, will be added. It aims provides small size, simple debugging and faster compilation.
Trip report from ngAtlanta: Angular’s Roadmap, Inclusion, and more
It will not be a ‘breaking change’. It will be automatically enabled updating to the newer version.
Angular Elements
Angular Elements allows Angular components to publish as Custom Element. Simply think as a Angular component wrapped as Custom Element.
This means the expansion of Angular Component more freely. And being as Custom Element, it can be used on vanillaJS or on different frameworks such as React!
- Angular Elements — Rob Wormald — AngularConnect 2017
- Export Angular components as Custom Elements with “Angular Elements”
Angular Labs
Angular Labs is the idea announced from the ‘AngularMix’ conference on Oct/2017. The main goal is to provide having a clear and balanced communication with the previous releases, about new features and research.
Angular Labs Logo
Has been set the following initial three goals.
1. Shematic
The Angular DevKit / CLI team’s efforts to build generic tooling for transforming code, likes scaffolding, querying backend APIs, etc.
2. Component Dev Kit
The Angular Material team’s working to extract some of the core solutions to common component development problems, and to expose them via the CDK.
CDK also includes extensible tools bringing different mechanisms helping the component development.
3. ABC (Angular Buildtools Convergence: Angular + Bazel + Closure)
An effort to converge the toolchain used internally at Google on building Angular applications with the external one. They’re consisted with:
- Bazel: The build system used for nearly all software at Google.
- Closure Compiler: The optimizer used to create JavaScript artifacts for nearly all Google web applications.
Migration of examples
In conjunction with StackBlitz, the example codes on Plunker will be moved to StackBlitz.
If you’re familiar with the VSCode, it can give more comfort way on using.
What is the future of AngularJS (v1.x)?
As most knows, AngularJS is the v1.x(Angular is v2.x+). How many users still using it?
The answer can be found from the developer’s survey result and according the result, there’re still a significant AngularJS users.
State Of JavaScript 2017: Library (Left) / StackOverflow: Developer Survey Results 2017 (Right)
From this, we can infer that the upgrade to Angular doesn’t mean a simple ‘upgrade’ for AngularJS users.
This isn’t just on compatibility issue of Angular with previous 1.x version only. There’s also new learning curves, TypeScript.
Long time ago, the core team promised on supporting multiple languages, but it didn’t happened. This is critical for those can’t give up their comfortable way on developing application(ex. those whom using CoffeeScript, etc.).
Until when the support of AngularJS will be continued?
The new coming minor release v1.7, will be held before the July/2018. After that, starting from the July 1st, v1.2.x and v1.7.x will be enter a Long Term Support period for 3 years.
Web Components and Polymer
2017 was a ‘big impressive’ for Web Components, because the support of browser was expanded.
Safari officially added Custom Elements and ShadowDOM support and Firefox(currently flags: dom.webcomponents.enabled, dom.webcomponents.shadowdom.enabled enabling are required) will be expected follow on version 60/61. Edge remained the only one without support.
webcomponents.org: Browser Support
The new <script type=”module”> has been added newly as a part of Web Components substituting HTML Imports. The lack of interest and the slow adoption of browser was the reason.
Check out more details: https://github.com/w3c/webcomponents/issues/645
Since then, Polymer 3.0 announced the transition plan on using ES6 modules instead of HTML Imports.
ESM is supported on all modern browser, so technically the lack support of browsers has been removed!
The recent and 2017 changes
Polymer
With the release of v2.0(May/2017), has been improved the interoperability with other library/framework. Also removed the restriction on using Polymer.dom for DOM handling and ShadyDOM(the ShadowDOM shim) has been splitted as stand alone polyfill.
The way on defining elements via factory method, changed to use more on standard way by ES6 class syntax and custom elements.
The recent release v2.4(Jan/2018), added the support of TypeScript and by February announced polymer-decorator.
In term of service adoption, the renewal design of YouTube was developed using Polymer. The adoption by Google on their flagship service can be a significant for many others.
The Web Components ecosystem
The new specification “Template Instantiation” purposed by Apple, brings different ways of instantiate template with the usage of template syntax, the use of condition and loops.
CSS Shadow Parts proposal also looks interesting. With the ::part() and ::theme() functions, make possible style shadow DOM elements from outside.
<my-slider> #shadow-root <div part="track"></div> <div part="thumb"></div></my-slider>// defined outside of <my-slider>my-slider::part(thumb) { color: red;}
Polymer v3.0
The v3.0 will be automatic translation from v2.0 and will be transition to ESM as mentioned earlier.
The new library called ‘lit-html’(still experimental)will be used on creating custom element. The element created will be called ‘lit-element’.
lit-html was announced on Polymer Summit(2017), which focuses on DOM rendering implementing it by ES6 Tagged Template Literals. Similar as React’s JSX, but it doesn’t require build process, because is standard.
It’s extensible providing directive and customized syntax.
Similar Tagged Template Literals libraries are: hyperHTML, hyperx, t7.js
lit-html and lit-lement
The prefix ‘lit’ stands for ‘literals’ and ‘little’
Static Type System
JavaScript is dynamic typed language, which types of variable are defined at the runtime by interpreter. Because of this nature, many traditional language developers indicated as weak point.
One of the problem not having types is the possibility of bug increase. To overcome, many attempts have been in non-standard way.
The representative tools and languages are, TypeScript from Microsoft, Flow and ReasonML from Facebook and followed by PureScript.
What are the biggest advantages on using it?
One study report says, the adoption of static type system can decrease 15% of bug rates.
static type systems find an important percentage of public bugs: both Flow 0.30 and TypeScript 2.0 successfully detect 15%!
— To Type or Not to Type:Quantifying Detectable Bugs in JavaScript
Which one choose?
TypeScript leads for now followed by Flow and ReasonML.
State of JavaScript 2017: JavaScript Flavors
TypeScript(superset of JavaScript), ReasonML(OCaml) and PureScript(Haskell) approaches as new programming languages and Flow as a tool. This are illustrated by how describes themselves.
- TypeScript: TypeScript is a superset of JavaScript that compiles to clean JavaScript output.- Flow: Flow is a static typechecker for JavaScript.- ReasonML: Simple, fast & type safe code that leverages the JavaScript & OCaml ecosystems- PureScript: A strongly-typed language that compiles to Javascript, written in and inspired by Haskell
Take a look on simple example below. The code throws an error, but it’s not shown until runtime.
function square(n) { return n * n;}square("oops");
As being superset of JavaScript, TypeScript has same syntax we already know. Just adding data types on it, can make to detect errors during compile time.
function square(n: number): number { ... }
Flow, can be done without defining types. Everything can be inferred.
This characteristic provide the adoption of type check without code changes and cost.
Checkout more on:- Adopting Flow & TypeScript- JavaScript vs. TypeScript vs. ReasonML
Prospectives
The growth of TypeScript will be consistent. Many well known projects are using it.
Angular, Vue.js, Polymer and GitHub Desktop are using TypeScript
While Flow and ReasonML built and used by Facebook on React and Facebook Messenger, not having a clear reference like TypeScript.
Reducing the rate of bugs is optimistic, but the needs of additional configuration(compile) and the learning curve can be an obstacle.
These all are basically an additional “supportive” tools helping to make good quality code and they aren’t “standard”.
jQuery
Still alive and well
jQuery isn’t primary option anymore when you consider start a project, but 300K downloads happens everyday. This is almost 300% growth compared at the beginning of 2017.
Not only downloads. The 90% of top 500K websites still uses jQuery.
http archive: JavaScript Library Detection
It can be a surprising result for whom thought jQuery is an old fashioned forgotten ancient library.
Prospectives
jQuery team had two releases(3.2.0 and 3.2.1) last year. Seeing this, it looks changes are slow downed.
Timmy Willison(core member), explains about as:
the team decided a while ago to release at a slow but steady pace, which we translated to about 2 releases a year
The planned v4.0 will have below changes.
- A complete rewrite using next generation JavaScript
- A rewrite of our speed framework
- An all-new event module design
For more details about future plans, check out:- v4.0 Milestone and Future Milestone as well.
Using the latest libray and framework isn’t the right answer. We don’t know what will be the future of jQuery, but is doing well not loosing its influence.
Closing
Front-end development is quite dynamic and impressive.
Following each corner of stack seems impossible, but knowing and understanding the part of it, can give us the insight on front-end development.
How many libraries/framework we should know? Knowing them all is the prove of your skill capability?
Of course, is better than not knowing, but each of them approaches with different philosophy saying they are all good and best.
There’s no right thing.