Seven opinionated predictions of stuff frontEnd developers should probably start learning… The JavaScript world is moving fast. The world of frontEnd development (and web development) is moving blazingly fast. Today, if you’re not on top or Webpack, React Hooks, Jest, Vue and NG elements, you start to feel the gap widening. But, things are changing. While the numbers of both developers and techs in the frontEnd jungle spike from year to year, the ecosystem aspires towards standardization. The emergence of new technologies and tools are already changing the game. It’s safe to say the general trend will be UI standardization, component-based modularity and composition which affects everything from styling to testing and even state management, and better modularity overall. This will include technologies built around web-components, ES modules, component-focused tools for styling or state management, and much more. This is an opinionated short and partial observation of the state of frontEnd development looking forward a few years. Naturally, it misses a million things, so please do feel free to jump in below and add with your insights. 1. Framework Agnostics Web Components So basically, this is the future. Why? because these pure web components are framework agnostic and can work without a framework or with any framework- spelling . Because they are free from JS fatigue and are supported by modern browsers. Because their bundle size and consumption will be optimal, and VDOM rendering is mind-blowing. standardization These components provide Custom Element, a Javascript API which allows you to define a new kind of html tag, HTML templates to specify layouts, and of course the Shadow DOM which is component-specific by nature. Prominent tools to know in this space are (and ), , and of course , for reusable modular components which can be directly shared, consumed and developed anywhere. Lit-html Lit-element StencilJS SvelteJS Bit When thinking of the future of our UI development, and of how principles of modularity, reusability, encapsulation, and standardization should look like in the era of components, web components are the answer. Learn more below. 7 Tools for Developing Web Components in 2019 9 Web Components UI Libraries You Should Know in 2019 Prototyping with Web Components: Build an RSS Reader 2. Future of Framework Wars? Yeah, in NPM downloads React is still queen. For . now So we’re not really going to dive into “who’s better and why”, and you find more answers to that question below. Instead, we’ll take a step back and note the bigger picture. The overall “market-share” for frontEnd technologies around components is growing. Constantly. The rate of new developers joining in is also fast-growing, and there’s more room for tools to adopt. So which framework will rule 5 years from now? no one knows. But, it will be safe to say that it will be the one best position to play in the native JS ecosystem where web-components rule the dom (pun intended! 😈). React is positioned at the top of the NPM downloads. look at . It seems that in actual web usage, the gap is . However — these numbers very small Shocking, right? 😃 Vue and React are, in fact, quite close in real-world usage. With the future standardization of framework-agnostic web components, one can wonder about the effects it might have on the UI framework-wars. And yes, React is not a framework… we know. Dive into frameworks benchmarking with real data: Benchmarking Angular, React and Vue for small web applications React vs Angular vs Vue.js — What to choose in 2019? (updated) 3. Component isolation, reuse and composition heBit components: futuristic code sharing, reuse and development When speaking of frontEnd development and UI components in the near future, it’s impossible to ignore the amazing promise and abilities of . Bit Share reusable code components as a team · Bit isolates and turns your components (or any reusable JS code) into shared building blocks you can use and share across all your projects and applications. And here comes the magic- you can also use Bit to develop the same components from different projects, while gaining full control over both source code changes and the entire dependency graph. Bit (open-source) In simpler words, with Bit you can instantly use a component from one project in another project, develop and change it from both, and sync changes. When working as a team, this workflow becomes enhanced with , Bit’s component hub, where you can organize and share your team’s code. bit.dev The hub provides everything you need to share and collaborate on components, from a beautiful search and discovery experience to a live component playground, full CI/CD support and much more. <a href="https://medium.com/media/584325f6121c810af8af8824913e9402/href">https://medium.com/media/584325f6121c810af8af8824913e9402/href</a> With Bit, you can build apps with full and instant access to all the components ever written by your team and the open-source community, and instantly share new components or suggest updates to existing ones. Wow. teambit/bit 4. ES Modules and CDN ES Modules is the standard for working with modules in the browser, standardized by ECMAScript. Using ES modules you can easily encapsulate functionalities into modules which can be consumed via CDN etc. With the release of Firefox 60, all ES modules, and the Node mteam is working on adding ES module support to . Also, is coming in the next few years. Just imagine, JS components isolated with Bit and consumed via CDN via . major browsers will support Node.js ES module integration for WebAssembly bit.dev ES modules: A cartoon deep-dive - Mozilla Hacks - the Web developer blog import denoland/deno 5. State management at the component level So… what’s new in state-management? eventually, we just through everything in the Redux global store anyways right? But, that can make it hard to fully leverage the modular and reusable nature of components. From this perspective, projects like MobX offer an interesting, more reactive approach (also check out ). and means you don’t need a 3rd party library and can manage states at the level of functional components, improving modularity and reusability. unstated React’s new Context API Hooks So looking forward, try thinking of state management more in terms of encapsulated components and less in terms of a global application store. State of React State Management for 2019 Redux or MobX: An attempt to dissolve the Confusion - RWieruch 5. Styling components as composition Modular with Bit: separate logic and theme components, compose your styling So there has been a lot of chatter around styling components in the past two years. From inline CSS or CSS modules to CSS in JS and styled components and even half-way solution like stylable, the options are plenty. When thinking of styling in the next few years, I like to think of styling as a composition. Meaning, our should include both logical components and theming components which can be composed together using tools like . This way, you can create a design system that evolves and changes as needed, and doesn’t force a cumbersome library on developers who are unwilling to adopt it. Design tools themselves, like Sketch an Figma, leverage will components for this purpose (combine them with Bit, and you get the ultimate component design system. This is pretty exciting. component design system Bit 5 Ways to Style React Components in 2019 Building a UI Component Design System 6. GraphQL API clients for data-driven apps So working with GraphQL opens up exciting possibilities for clients through components. Using you can easily build UI components that fetch data via GraphQL. Combined with , you can import and develop these components right from the consuming projects you’re working on. Apollo Bit Through the smart management of APIs we can simplify the workflow around data-driven application development and speed the dev-velocity of our work. So, it’s definitely worth diving into looking a couple of years forward. 13 GraphQL Tools and Libraries You Should Know in 2019 7. Component-based design tools As , the gap between designer and developers will be bridged. This will become possible from both ends of the equation, meaning from both designer and developer perspectives. components become our design system already created dependency links between design components so you can design and update designs in a modular way. are already sprouting, and it’s just a matter of time. Tools like are built from the grounds up based on reusable UI elements. are building a tool for designers who code, with a degree of control over turning UI elements into reusable React components. Through , you can turn the components you design into reusable building blocks that can be visually discovered, used and even developed anywhere, bridging the gap from the developer’s end. Bit + component design tool is a powerful future. With Bit and web components via CDN, this means full-blown composition. Sketch Integrations to code components Figma Framer Team Bit Atomic Design With React And Bit: Simplify a Complex UI Uber Design | Get to know Design at Uber Building a Visual Language

AirBnB

Discovery

Fetch

Instantly

Mozilla

Uber

Velocity

YouTube

I write code and words. Learn about Bit: github.com/teambit/bit

Read My Stories

Too Long; Didn't Read

Learn how to continuously improve your codebase

7 FrontEnd JavaScript Trends and Tools You Should Know for 2020

Too Long; Didn't Read

Companies Mentioned

@ysaring

RELATED STORIES