Libraries and are one of the intense competitiveness on front-end development. frameworks 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. State of JS 2017: Libraries 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 — — which could led loose the actual position, but . the license issue treated well Also, React is the most wanted on job markets. This result shows clearly that React is surpassing others. indeed.com: Job Trends 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 (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. version 16 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 inspired by . RFC(Request For Comments) 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 or comes to play. Redux MobX 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 “ ” from the official doc and even more, it recommends not using. Why Not To Use Context 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. Beyond React 16 by Dan Abramov — JSConf Iceland ⚛ 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. 2017 JavaScript Rising Stars 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. — https://betweenthewires.org/2016/11/03/evan-you/ What differs Vue.js from others? Vue.js describes itself as “The Progressive Frameworks”. JavaScript 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 which was inspired from the React based SSR universal webapp framework (first appearance 2016), reached on Jan/2018. Nuxt.js next.js v1.0 The , which helps build material design UI component, also reached on Feb/2018. vuetify v1.0 The popular VSCode from MS, also started to functionality of Vue.js. support debugging These changes makes attractive atmosphere for Vue.js more and more. Prospectives The powerful CLI tool , which let configure dev environment, will release a new version soon. vue-cli 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, on ‘v-for’ directive and more. iterator 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 State of VueJS 2018 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 " " article for reference. Why we moved from Angular 2 to Vue.js (and why we didn’t choose React 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 mostly. In this year will be expected to have adding new features and new different approaches as well. improving performance 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 ‘ ’ 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. AngularMix 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. (Angular Buildtools Convergence: Angular + Bazel + Closure) 3. ABC 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 , the example codes on will be to StackBlitz. StackBlitz Plunker moved 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. (Left) / (Right) State Of JavaScript 2017: Library StackOverflow: Developer Survey Results 2017 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 , 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.). promised on supporting multiple languages 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 period for 3 years. Long Term Support Web Components and Polymer 2017 was a ‘ ’ for Web Components, because the support of browser was expanded. big impressive Safari officially added Custom Elements and ShadowDOM support and Firefox(currently flags: enabling are required) will be expected follow on version 60/61. Edge remained the only one without support. , dom.webcomponents.enabled dom.webcomponents.shadowdom.enabled : Browser Support webcomponents.org The new 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. <script type=”module”> Check out more details: https://github.com/w3c/webcomponents/issues/645 Since then, the transition plan on using ES6 modules instead of HTML Imports. Polymer 3.0 announced 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 (May/2017), has been improved the interoperability with other library/framework. Also removed the restriction on using Polymer.dom for DOM handling and (the ShadowDOM shim) has been splitted as stand alone polyfill. release of v2.0 ShadyDOM The way on defining elements via factory method, changed to use more on standard way by ES6 class syntax and custom elements. What’s new in 2.0 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 . The adoption by Google on their flagship service can be a significant for many others. YouTube was developed using Polymer The Web Components ecosystem The new specification “ ” purposed by Apple, brings different ways of instantiate template with the usage of template syntax, the use of condition and loops. Template Instantiation Template Instantiation CSS Shadow Parts proposal also looks interesting. With the and functions, make possible style shadow DOM elements from outside. ::part() ::theme() <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. Changes for v3.0 The new library called ‘ ’(still experimental)will be used on creating custom element. The element created will be called ‘ ’. lit-html 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, from Microsoft, and from Facebook and followed by . TypeScript Flow ReasonML 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 is a superset of JavaScript that compiles to clean JavaScript output.- Flow is a static typechecker for JavaScript.- Simple, fast & type safe code that leverages the JavaScript & OCaml ecosystems- A strongly-typed language that compiles to Javascript, written in and inspired by Haskell TypeScript: Flow: ReasonML: PureScript: 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. , , and are using TypeScript Angular Vue.js Polymer GitHub Desktop While Flow and ReasonML built and used by Facebook on and , not having a clear reference like TypeScript. React Facebook Messenger 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. npm-stat.com: jquery 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( and ) last year. Seeing this, it looks changes are slow downed. 3.2.0 3.2.1 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 — What’s the future of jQuery in 2018? 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:- and as well. v4.0 Milestone Future Milestone 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.
