01. Web Components
Web components are a solution to that issue. They are written using native web technologies, are self-contained and expose values and behaviours through attributes like any other HTML element.
They are made up of three separate specifications: HTML templates, shadow DOM and custom elements.
These define the visual appearance of a component. They contain the structure of content, which can then be copied and reused for each component on the page.
The concept of keeping the internal markup of the component away from the rest of the document. This keeps styles and other logic from breaking out and affecting other components.
These are the glue that holds everything together. They are responsible for the lifecycle of the component, which can include extra logic for when a component is added or removed from the page.
Web components can be used alongside their framework counterparts. As they are supposed to act like native elements, most frameworks will work with them without issue. Some frameworks, like Angular, may need to be told of their existence ahead of time to function properly.
As they can be readily composed together, components can be imported from many sources. Websites like webcomponents.org provide several ready-made elements that can be dropped in and used straight away.
While the concept of a web component has been around since 2011, the specifications have constantly changed. In 2018 things settled down, with Firefox implementing the latest versions of shadow DOM and custom elements specifications in October. With Edge due to ship its implementations in 2019, all major browsers will natively support them.
WebAssembly – or ‘WASM’ – is a compile target for code written in other languages more suited to heavy lifting. This enables existing programs written in languages like C++, Rust or Go to make it to the web. By compiling these down into a binary format, it enables them to be split into chunks and downloaded efficiently.
WASM has cross-browser support, now including mobile. This opens the door to many opportunities that were previously limited to native applications. Over the next year we may see more games and application developers embrace this technology.
Vue has been steadily on the increase in the past year. Recent updates have had more of a focus on developer experience and quality improvements. Vue 2.5 was released back in 2017 and included updates to error handling, server rendering and TypeScript definitions. Single functional components – one of Vue’s more popular features – were updated to support scoped CSS and also improved template compilation.
Since then, updates to the core Vue experience have been mostly focused on bug fixes and performance improvements. The focus has now shifted to complementary development products.
Version 3 of Vue’s CLI tool moves to a more configurable approach. Features such as routing, linting and data management are selected during initialisation. These features can be added and removed as needed without picking apart the build process.
Along with the CLI, there is a web interface available to visualise the different parts of an application. This acts as a dashboard to help analyse load times, sizes and pain points within the build as it runs.
Looking forward, 2019 will see the release of Vue 3.0. While breaking changes will be kept to a minimum, this version will focus on making use of ES2015 class-based components. It will also support fragments and portals, much like the features in React.
- Learn more: Speed up performance with Vue.js
- Learn more: How to get started with TypeScript
React 16.6 brought the ‘suspense’ feature, which made dynamic content easier to work with. Combined with React.lazy(), it creates a point at which to split code into smaller chunks. Suspense can render a fallback component, such as a loading spinner, while the component loads. In 2019, suspense will grow into a more flexible tool. By triggering data fetching as part of the flow, users will get a seamless, native-like experience.
One of the easiest ways to get up and running with React is by using the ‘Create React App’ tool to stamp out a project. A recent update upgraded its dependencies and improved its features. Create React App 2.0 uses Babel 7 and Webpack 4 to build projects, which makes it faster to build and opens the door to newer features like the shorthand fragment syntax.
Projects made with the previous version can be upgraded by updating the ‘react-scripts’ dependency. Updating ejected applications is a more manual process, but they can be upgraded piece by piece.
React shows no sign of slowing down this year. Hooks enable functional components to state and lifecycle behaviours. Concurrent mode improves the performance of slow-rendering components. Both features are slated for a release in the first half of 2019.
- Learn more: Develop reusable React components
Angular is a framework involved in all parts of an application, including data handling and interface updates. While it can inflate bundle sizes, all parts of the application will work together seamlessly.
Version 7 of Angular adds improvements to every part of the framework. While there are few changes that developers will get to play around with, there are lots of changes to benefit speed and reliability behind the scenes. It is now possible to add performance budgets for bundle sizes. This will make sure that a build never gets excessively large without being made aware.
As part of an overall update to Material Design, the respective Angular CDK components have also been updated. For example, the scrolling module enables support for virtual scrolling, which helps to keep long lists scrolling smoothly.
Upgrading to version 7 will, for most, involve running one line using the CLI.
Future updates will focus on the new Ivy rendering engine. This will improve the ability to remove unused code from the bundle, resulting in dramatically reduced file sizes. Due to the structure of Angular applications, the rendering engine can be replaced without requiring any changes to the internal logic.
In its first iteration, the Polymer library was the gateway to a future of custom elements. By embracing the then-upcoming web component specifications, developers were able to piece together websites from ready-made building blocks.
Over time, these specifications have evolved, and one of the building blocks – HTML imports – was no longer part of the plan. The recent release of Polymer 3.0 addresses this issue and focuses more on using more approachable ES modules to achieve a similar goal.
The original aim of the Polymer library was to become lighter as the support for those specifications grew, but it ended up growing instead. To refocus on that aim, 3.0 is the last version of the library to be released. Moving forward, it is recommended components are made with LitElement and lit-html.
LitElement is a lightweight wrapper around web components to make them easier to work with. The html tagged template literal is lit-html, which is a templating library with DOM diffing to keep page updates as small as possible.
Both LitElement and lit-html are in a pre-release state at the moment, but the Polymer team aims to get them released at some point early this year.
09. Service Workers
Service workers enable an application to run a background process that manages some lower-level features. This can include push notifications, syncing data in the background and even providing an experience for when the device is offline. The level of control is up to the developer.
Service workers have been around for some time on Android, but they have also recently made the jump over to iOS. While the focus is on mobile devices, they also work on desktop. Now that the majority of visitors will have access to the functionality, there is no better time to start improving the experience for users.
- Learn more: Make your app work offline with service workers
There are times when a canvas element is the best tool for the job. For example, online games can use them to generate sprites, or videos can have processing effects applied to them.
The problem is that any interactions with the element will always work on the main thread, which slows things down for the user. For repeated animations or heavy processing, this can became a problem.
OffscreenCanvas decouples the canvas logic from the element. Without the link to the DOM, it can be used in a worker to free up the main thread. Currently only Chrome supports this feature, with Firefox including it behind a flag.
With version 2, there are improvements to syntax to make components as readable and predictable as possible. Updates to lifecycle hooks and computed values make it easier for the compiler to know where to make optimisations.
Features are deliberately light to keep each application fast. Many updates since version 2 have focused on avoiding situations that result in poor performance in the compiled output.
Discussions are being held about a rewrite of component logic in Svelte to bring it in line with other frameworks. As a compiler, it is able to make its own modifications to help function better, while remaining a clean environment for developers.
13. Resize Observer
When adding elements to a resize observer, it gets notified when the bounds of the element change. The visuals can then be updated based on the space available. As an example, the same card component can look different in either a sidebar or the main body.
This observer is currently only available in Chrome, while it is in development in Firefox. Other browsers can fall back to monitoring browser resize events, but this will hit performance.
Build multiple different mobile and desktop applications using web technologies and one codebase with Cordova. PhoneGap – Adobe’s distribution of Cordova – provides additional tools, such as iOS development on Windows.
Storybook enables you to create a gallery of UI elements in a customisable environment separate from any application. It works with popular frameworks such as React and Vue, along with support for HTML snippets.