preface

译 文 : A Recap of Frontend Development in 2019

Translator: Front end counsellor

A review of the top front-end and Web development events, news, and trends of 2019.

Over the past year, the world of front-end development has moved rapidly again, and this article summarizes all the important events, news, and trends from ‘2019.

Originally did not plan to translate this article, but found that the need for scientific Internet and membership, so add their own understanding, free translation, non-important content I directly translated a key, hey hey.

The original content is insufficient, I have added some supplements.

1. NPM downloads comparison of popular front-end frameworks and libraries

  • ReactInternationally, it still isNo.1Libraries, and growing
  • jQueryAs an established library still occupies the second position
  • It was followed byAngularandVue
  • Last year,SvelteGot a lot of attention, but it’s still fighting for adoption.

2. WebAssemblyBe connectedWebThe fourth language

WebAssembly becomes the fourth language of the Web that connects HTML, CSS, and JavaScript. After a quiet year, WebAssembly was officially accepted by the W3C consortium as a recommended Web language in early December.

WebAssembly has gained widespread attention and rapid adoption since its release in 2017. In the past few years, we have seen the creation and integration of the 1.0 specification into all major browsers.

Another WebAssembly related news: the formation of the Bytecode Consortium

Interested can look at: bytecodealliance.org/articles/an…

3. TypeScriptSurge in usage

2019 is the year of TypeScript. Not only has TypeScript become the best choice for adding data types to JS code, but many developers choose to use it for personal projects and work.

In a StackOverflow survey released earlier this year, TypeScript tied with Python as the most popular language behind Rust. Expect it to climb even higher in 2020.

  • TypeScript v3.0in2018At the end of the release
  • And to the2019In 2003, the number of releases surged tov3.7, including newer onesECMAScriptFeatures such as optional linking and invalid operators and improvements to type checking.

Popularity of TypeScript and React

4.”React Hooks“Become the preferred method and makeReactContinue to lead

Vue and Angular have enthusiastic supporters, with Vue even surpassing React on GitHub. But React continues to lead the pack when it comes to adoption in both personal and professional projects.

  • At the end of 2018,ReactThe team introduced hookshooks
  • In 2019,hooksswallowedReactThe vast majority of developers use it as the preferred way to manage state and component lifecycles.
  • In this year, there are countless relatedReact hooksThe article, the pattern began to solidify.
  • ReactThe most important toolkits have been releasedhooksThe version of the.

React Hooks provide a concise syntax for managing component state and lifecycle in functional components.

In addition, React provides the ability to build custom hooks, which allows us to create reusable code and shared logic without creating higher-order components or using render items.

5. ReactThe focus of the team shifted to tools

After the React team added a lot of hooks in V16.8, revisions were relatively minor (except for concurrent mode), and version 16.14 was released at the end of the year.

The team then shifted its focus to improving the user development experience by providing more tools.

Tom Occhino, spokesperson and team manager for ReactConf, says there will be improvements from three goals:

Low barriers to entry, high productivity, and scalability.

Let’s take a look at some of the features the React team plans (or has) to release:

  • All-new versionReact DevTools
  • A brand newReactPerformance analyzer tool
  • Create React App v3version
  • Test utility updates
  • Suspense
  • Concurrent mode (coming soon)
  • FacebookThe use ofCSS-in-JS(Coming soon)
  • Progressive/selective page blending (hydration(In progress)
  • Accessibility improvements to React core (coming soon)

Added: Progressive/selective page mix (hydration) :

Users already see a fully rendered page (instead of a blank page) when they load the site, which then becomes an interactive page. The site will also benefit from significant performance improvements as the browser does not need to do any redrawing (usingReactRerender your page)

For those interested, check out this one: The Case of Partial Transformation (With Next and Preact)

6. Vueforv3As the release was prepared, usage continued to grow

Vue may not have the most adoption internationally, but it’s hard not to say it has the most enthusiastic users.

Vue brings out the best of React and Angular, but it’s also simpler.

Another big selling point is that it’s more open and not controlled by big companies like React (Facebook) or Angular (Google).

The big news for Vue is the upcoming 3.0 release, with alpha expected by the end of Q4.

In 2019, Vue 2.x was only slightly updated at the beginning of the year, as most of the effort went into V3.

Vue 3.xMajor changes:

  • Composition API
  • Global installation/configuration API changes
  • supportFragmentsAnd cross-component rendering
  • Time Slicing
  • Rewrite the virtualDOM (Virtual DOM Rewrite)
  • Static tree promotion (static tree hoisting), static attribute promotion (static props hoisting)
  • hooks API
  • slotSlot generation optimization (separate rendering of parent and child components)
  • betterTypeScriptsupport

Another notable release this year is vuE-CLI version 4, which focuses on updating the base tools.

Angular releases V8 (V9?) Version, and the new Ivy compile/render pipeline

In 2019, Angular released version V8, along with a new renderer/build pipeline called Ivy.

Ivy’s biggest benefit is its smaller bundle size, but it offers a number of huge additional improvements. Ivy is currently an optional feature prior to Angular 9. This article details the features released in version 8, but the notable updates are:

  • modernJavaScriptDifferential loading of
  • Choose to joinIvyfunction
  • Router backward compatibility
  • The improvedWeb Workerbundled
  • Choose to join usage sharing
  • Dependency update

In December 2019,AngularThe team is ready.v9Release of the version that will be released on2019At the end of the year or2020It was officially released earlier this year.

The biggest change in Angular 9 is that Ivy is the standard renderer.

8. Accessibility (a11y) and internationalization (i18nIs becoming more and more important

Patterns and frameworks have been solidified after the rapid development of JavaScript and the web since 2015.

This allows developers to focus more on tools to localize applications and make them more accessible, making the web experience better for everyone.

We should be proud of the progress we have made, but there is still a long way to go.

The description of accessibility in the original text is incomplete, and the following is pasted from the fish head

One of the most important things you should know about in Web development but never take seriously – Accessibility

The org.eclipse.swt.accessibility, abbreviated A11Y, usually is the abbreviation of initials + + middle letters length at the end of the letter, translated as “Accessibility”. This is a technical concept that allows as many people as possible to access the sites we develop, and through this concept, makes Internet access fair.

A11Y is very much the right thing to do, and in some countries and regions, even providing accessible sites has become part of the law. There is a sentence on MDN: “The fundamental purpose of the Web is to serve everyone, not limited by hardware and software, language, culture, location and physical and mental state.” (the original: The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, Location, or physical or mental ability.) Web Accessibility (Accessibility)

Whether ordinary people or is disabled friends, needs to have the standard website can easily access to information, accessible web is the development of web specifications, with a more rigorous attitude and condition to design a web page, the page content to carry out the “accessible” to different degree or demand of users, can be smooth to obtain information on the site.

9. ES2019function

ECMAScript continues its annual update cycle with new features for the ES2019 release:

  • Object.fromEntries()
  • String.trimStart() 和 String.trimEnd()
  • JSON.stringifyBetter handleunicode.
  • Array.flat() 和Array.flatMap()
  • try/catchbundled
  • Symbol.description

Despite some major updates to ES2019, the upcoming ES2020 looks to have the most anticipated features since ES6 / ES2015:

  • Private fields in a class
  • Optional link –obj.field? .maybe? .exists
  • Invalid merge operator —item ?? 'use this only if item is null/undefined'
  • BigInts

10. FlutterExplosive development first year, challengeReact NativeCross-platform frameworks are king

The Current Star count of Flutter is 81.1K. It will soon surpass React Native’s 83.2K.

However, the number of issues has been maintained at 5000+ for many years.

Flutter doesn’t have the same community of developers that React Native has with React Web developers to make progress together, so this popularity is real: Flutter is making itself the best cross-platform framework.

11. JSFoundation andNode.jsThe foundation merged intoOpenJSThe foundation,Node v12Become aLTSversion

In order to supportJavaScriptAnd accelerate the development of language,Node.js FoundationandJS FoundationAmalgamatedOpenJS Foundation.

The foundation’s message is collaboration and growth under a neutral entity that now hosts 31 open source projects, including Node, jQuery, and Webpack.

This move is positive for the entire JS community and is supported by big tech companies like Google, IBM and Microsoft.

Node released v12 this year with long Term support (LTS) until April 2023.

Node12 offers many new features, security updates, and performance improvements. Some notable updates include:

  1. rightimport/ exportNative support for statements
  2. Private class field
  3. withV8 Enginev 7.4Version compatibility
  4. rightThe TLS 1.3Support and other diagnostic tools

12. Sveltereleasev3Version, but adoption rate is not good

Write in 2020, observeSvelteIt’s going to be interesting to see how it grows and develops, and hopefully we can get some best practices out of it to understand how it worksThe React, VueandAngularWait for competitors to compete.

Static sites continue to be widely used and favored by developersJAMStackmodel

With the increased adoption of frameworks like Gatsby, the rapid growth of static Web hosts like Netlify, and the emergence of countless Headless CMS companies, static sites proved that they would become an integral part of the Web.

  • We can use imagesReactWait for libraries to build our site, then compile them into static HTML at build time.
  • Because all pages are now pre-built, no server time is required to mix them with data on request
  • These pages are available immediately and can be utilized inCDNThe advantage of caching makes content respond faster

A popular programming pattern used by static sites is JAMStack (JavaScript, API, Markup)

This is a kind ofStatic/SPAHybrid methods, where the page is served statically, but once on the client, it is served asSPAUse.

14. Front-end tools get better

JavaScript fatigue has been at the heart of front-end developers’ jokes for years, but with the tireless efforts of those who maintain open source projects, we’re beginning to see a way to alleviate it.

Before, if we wanted to build a SPA, we had to use Bower or NPM to introduce dependencies, figure out how to compile it using Browserify or Webpack, write Express servers from scratch, and maintain application updates if we ran into problems

It took a few years of pain, but now we’ve iterated to one of the most vibrant, developed software package ecosystems.

  • There are tools that can help us abstract the painful parts of building applicationsCreat React App, Vue CLI, Angular CLI
  • Used for static sitesGatsbyforReact NativeMobile appsExpoforSSRapplication-specificNext / Nuxt.
  • instantGraphQLEngine:Hasura, can be automatically generatedTypeScriptType.
  • WebpackIt has been simplified and many optimized plug-ins have been built in.

15. GraphQLContinues to be loved by developers and is gaining further adoption among tech companies

GraphQL promises to solve many of the problems exposed by traditional REST-based applications. Developers quickly fell in love with GraphQL. GitHub wrote its latest API in GraphQL a few years ago, and many other organizations are making changes as well.

The GraphQL application is data-driven, not endpoint-driven.

This allows the client to declare the exact data required and receive the corresponding JSON response from the server.

The GraphQL API provides a framework for logging all data and its types, giving developers a comprehensive understanding of the API. Because the GraphQL API provides a fully typed architecture, it also integrates well with TypeScript applications.

GraphQL downloads have more than doubled in the past year:

16. CSS-in-JSstrong

As mentioned, Facebook may even see CSS-in-JS as the future of the front end and release its own library.

In a traditional application, we add styles like this:

// Component JS file
const MyComp = ({ isActive }) => {
  const className = isActive ? 'active' : 'inactive';
  return <div className={className}>HI</div>
}
// CSS file
.active { color: green; }
.inactive { color: red; }
Copy the code

With CSS-in-JS, you no longer manage CSS classes, just pass props to the styled component, which handles dynamic styling using declarative syntax. The code is much cleaner.

Now, everything reads as normal React code:

Const Header = styled. Div 'color: ${({isActive}) => isActive? 'green' : 'red'}; `; Const MyComp = ({isActive}} => (<Header isActive = {isActive}> HI </ Header>)Copy the code

The two main csS-in-JS libraries are styled- Components and emotion

17. VS CodeDominated the editor market

Language developers are passionate about their IDE/text editor and are not afraid to argue about why their choice is the best.

However, front-end developers almost uniformly choose VS Code as their editor. VS Code is an open source editor that provides rich plug-ins to provide an incredible development experience.

This is the distribution of text editor usage based on the status of the 2018 survey (which will be updated in 2019) :

18. Webpack 5Iterate to beta and release soon

Webpack has become a core component of almost all modern JavaScript toolchains and is the most commonly used build tool.

Webpack is always improving its performance and usability to make it better for developers. Webpack 5 focuses on the following:

  • Improve build performance with persistent caching.
  • Use better algorithms and defaults to improve long-term caching.
  • Clean up the internal schema without making any major changes.

19. JestfromFlowMigration toTypeScript

Facebook maintains Jest, a popular testing library, and Flow, a rival to TypeScript.

They made an announcement in early 2019, choosing to migrate Jest from Flow to TypeScript.

FlowNow it’s “grandma doesn’t hurt, uncle doesn’t love” situation…

20. ChromeTo be released this year72-78.Stable version

Chrome continues to iterate rapidly, rapidly adding new features to the Web and developer tools.

In 2019, we saw seven stable releases, including Beta V79, Dev V80, and Canary V81

Check out the Wiki below for some of Chrome’s most important new features over the past year. New Features of Chrome

21. Microsoft EdgeBrowser kernel moved toChromium

Internet Explorer and its newer version, Edge, are a joke to Web developers, and worse, a pain to work with.

Microsoft followed the market’s decision to use open source Chromium

22. FacebookreleasedHermesThis is androidJavaScriptEngine, for improvementReact Native

Facebook didn’t think the Android JavaScript engine was fast enough, so they built their own.

If you’re interested, you can read this:Meet Hermes, a new JavaScript Engine optimized for React Native

2020The trend forecast for 2008

  • With code split andPWAFurther utilization of the performance is stillWebThe most important part of.
  • WebAssemblyIt’s becoming more and more common, it’s actually being adopted, it’s being used in products.
  • GraphQLIn new startups and new projectsREST, and established companies are migrating to it.
  • TypeScriptBecome the default choice for startups and new projects.
  • CSS-in-JSMay become the default style setting method rather than the normal oneCSS.
  • “No code” apps are becoming more and more popular. As AI improves and application abstraction layers increase, it becomes easier to build applications
  • FlutterMay replaceReact NativeBecome the best way to build cross-platform mobile applications.
  • SvelteThere will be more practical projects to use.
  • Deno(byNodeCreator builtTypeScriptProject) can actually be used.
  • AR / VRUsing techniques such asA - Frame, the React of VRandGoogle VRSuch libraries as well as on the browser nativeAR / VRTool improvement, and made great progress.
  • Containerization (e.gDocker, Kubernetes) is becoming more common in the front end.

❤️ Read three things

If you find this article inspiring, I’d like to invite you to do me three small favors:

  1. Like, so that more people can see this content (collection does not like, is a rogue -_-)
  2. Pay attention to “front-end persuaders” and share original knowledge from time to time.
  3. Look at other articles as well

Personal wechat: Huab119

You can also get all the posts from my GitHub blog:

Front-end persuasion guide: github.com/roger-hiro/… Let’s play. ~