Tech News - Front-End Web Development

Last week, the Mozilla Gfx team announced that WebRender is now in beta. It is not yet released because of some blocking bugs. WebRender is an experimental renderer for Servo that draws web content like a modern game engine. It consists of a collection of shaders that very closely matched CSS properties. Though WebRender is known for being extremely fast, its main focus is on making rendering smoother. It basically changes the way the rendering engine works to make it more like a 3D game engine. What are the WebRender and Gecko changes? In order to save GPU memory, the sizing logic to render targets is now more efficient. It comes with improved tooling to synchronize between the WebRender and Gecko repositories. Many incremental changes towards picture caching including batch caching based on z id rather than prim index, removing PrimitiveMetadata struct, and many more. A proper support for using tiled images as clip masks. A texture corruption issue after resuming from sleep on Linux with proprietary Nvidia drivers is fixed. A flickering issue at startup on Windows is fixed. The backface-visibility bugs are fixed. The z-fighting glitch with 3D transforms is fixed. A font leak on Windows is fixed. In the future, we will see more improvements in memory usage, the interaction between blob images and scrolling, and support for WebRender in Firefox for Android. You can enable WebRender in FireFox Nightly by following these steps: In about:config set “gfx.webrender.all” to true. After configuring restart Firefox. Read the official announcement on the Mozilla Gfx team blog. Mozilla updates Firefox Focus for mobile with new features, revamped design, and Geckoview for Android Developers of Firefox Focus set to replace Android’s WebView with GeckoView Mozilla optimizes calls between JavaScript and WebAssembly in Firefox, making it almost as fast as JS to JS calls

Chrome 71 beta was released yesterday with international relative time formats and other features. A relative time format in Chrome 71 Beta Phrases like ‘yesterday’ or ‘three months’ are common while writing or speaking. But such phrases are not a part of the built-in date and time APIs. So using them in code is not possible. To fulfil this need, libraries provide localized versions of such phrases. But using them required downloading customary phrases for each supported language thereby increasing the bundle size and download time. Chrome 71 Beta has a new Intl.RelativeTimeFormat() function which shifts this job of phrases to the JavaScript engine. Examples to show how this works: const rtf = new Intl.RelativeTimeFormat('en'); rtf.format(3.14, 'second'); // → 'in 3.14 seconds' rtf.format(-15, 'minute'); // → '15 minutes ago' This API can even do things like retrieving information for multiple languages, dealing with parts of a date or time individually etc. For more details on this, visit the Chrome post. Some other features in Chrome Beta 71 Apart from the addition of a relative time format, other features have been added. FullscreenOptions The Element.requestFullscreen() method can now be customized on Android with the use of an optional options parameter. The navigationUI parameter allows choosing between making the navigation bar visible or a completely immersive mode where no controls are shown on the screen until a gesture is performed to bring out the navigation. Support for new font types Chrome Beta 71 brings support for COLR/CPAL fonts. These are a type of OpenType color font composed of layers. The layers are made of vector outline glyphs and color palette information. With this addition, Chrome now supports three color font formats which are cross-platform. The other two are CBDT/CBLC and SBIX. MediaElement and MediaStream nodes defined only for AudioContext Chrome Beta 71 allows creation of MediaElementAudioSourceNode, MediaStreamAudioSourceNode, and MediaStreamAudioDestinationNode elements exclusively by using an AudioContext. In older versions these could be created using an OfflineAudioContext, but that is not supported anymore due to spec compliance and real-time nature of the nodes not being met by OfflineAudioContext. Some interoperability improvements For interoperability with other browsers, Chrome now calls capture event listeners in the capturing phase. This is done at shadow hosts, while previously it was done in the bubbling phase. Chrome now calculates the specificity for the :host() and :host-context() pseudo classes and also for the arguments of ::slotted(). This makes it compliant with the Shadow DOM v1 spec. Items removed in Chrome Beta 71 The items removed in this version are: SpeechSynthesis.speak without user activation importScripts() of new scripts after service worker installation prefixed versions of several APIs URL.createObjectURL for MediaStream document.origin For a complete list of features and details, visit the Chromium Blog. Chrome 70 releases with support for Desktop Progressive Web Apps on Windows and Linux Chrome V8 7.0 is in beta, to release with Chrome 70 Chrome 69 privacy issues: automatic sign-ins and retained cookies; Chrome 70 to correct these

Yesterday, the React community introduced Hooks, a new feature proposal which has landed in the React 16.7.0-alpha. With the help of Hooks, you will be able “hook into” or use React state and other React features from function components. The biggest advantage is that Hooks don’t work inside classes and let you use React without classes. Why Hooks are being introduced? Easily reuse React components Currently, there is no way to attach reusable behavior to a component. There are some patterns like render props and high-order components that try to solve this problem to some extent. But you need to restructure your components to use them. Hooks make it easier for you to extract stateful logic from a component so it can be tested independently and reused. All of this, without having to change your component hierarchy. You can also easily share them among many components or with the community. Splitting related components In React, each lifecycle method often contains a mix of unrelated logic. And many times the mutually unrelated code that changes together splits apart, but completely unrelated code ends up combined in a single method. This could end up introducing bugs and inconsistencies. Rather than forcing a component split based on lifecycle methods, Hooks allow you to split them into smaller functions based on what pieces are related. Use React without classes One of the hurdles that people face while learning React is classes. You need to understand that how this works in JavaScript is very different from how it works in most languages. You also have to remember to bind the event handlers. Hooks solve these problems by letting you use more of React’s features without classes. React components have always been closer to functions. It embraces functions, but without sacrificing the practical spirit of React. With Hooks, you will get access to imperative escape hatches that don’t require you to learn complex functional or reactive programming techniques. Hooks are completely opt-in and are 100% backward compatible. After receiving the community feedback, which seems to be positive going by their ongoing discussion on RFC, this feature, which is currently in alpha release, will be introduced in React 16.7. To know more in detail about React Hooks, check out their official announcement. React 16.6.0 releases with a new way of code splitting, and more! InfernoJS v6.0.0, a React-like library for building high-performance user interfaces, is now out RxDB 8.0.0, a reactive, offline-first, multiplatform database for JavaScript released!

After the release of React 16.5.0 last month, the React team announced the release of React 16.6.0 yesterday. This release comes with a few new convenient features including support for code splitting, easier way to consume Context from class components, and more. Let’s see what changes have been made in this release: React.memo() as an alternative to PureComponent for functions React.memo() is similar to React.PureComponent but for function components instead of class. It can be used in cases when the function component renders the same result given the same props. You can wrap the function component in a call to React.memo() for a performance boost in some cases by memorizing the result. This will make React skip rendering the component and reuse the last rendered result. React.lazy() for code splitting components You can now render a dynamic import as a regular component with the help of React.lazy() function. To do code splitting you can use the Suspense component by wrapping a dynamic import in a call to React.lazy(). Library authors can leverage this Suspense component to start building data fetching with Suspense support in the future. Note that the feature is not yet available for server-side rendering. Added Class.contextType In React 16.3 a new Context API was introduced as a replacement to the previous Legacy Context API, which will be removed in a future major version. React 16.6 comes with contextType, which makes it convenient to consume a context value from within a class component. A Context object created by React.createContext() can be assigned to the contextType property. This enables you to consume the nearest current value of that Context type using this.context. This update is done because developers were having some difficulties adopting the new render prop API in class components. getDerivedStateFromError() to render the fallback UI React 16 introduced error boundaries to solve the problem of a JavaScript error in a part of the UI breaking the whole app. What Error boundaries do is, they: Catch JavaScript errors anywhere in their child component tree Log those errors Display a fallback UI instead of the component tree that crashed An already existing method, componentDidCatch() gets fired after an error has occurred. But before it is fired, null is rendered in place of the tree that causes an error. This sometimes results in breaking the parent components that don’t expect their refs to be empty. This version introduces another lifecycle method called getDerivedStateFromError() that lets you render the fallback UI before the render completes. Deprecations in StrictMode The StrictMode component was released in React 16.3 that lets you opt-in early warnings for any deprecations. Two more APIs are now added to the deprecated APIs list: ReactDOM.findDOMNode() and Legacy Context. The reason these APIs are deprecated are: ReactDOM.findDOMNode(): This API was supported to allow searching the tree for a DOM node given a class instance. Typically, you don’t require this because you can directly attach a ref to a DOM node. Most uses of this API are often misunderstood and are unnecessary. Legacy Context: It makes React slightly slower and bigger than it needs to be. Instead of the Legacy Context, you can use the new Context API that was introduced in React 16.3. Miscellaneous changes unstable_AsyncMode renamed to unstable_ConcurrentMode unstable_Placeholder renamed to Suspense and delayMs to maxDuration To read the entire changelog of React 16.6, check out their official announcement and also React’s GitHub repository. React 16.5.0 is now out with a new package for scheduling, support for DevTools, and more! React Native 0.57 released with major improvements in accessibility APIs, WKWebView-backed implementation, and more! InfernoJS v6.0.0, a React-like library for building high-performance user interfaces, is now out

Mozilla has today released Firefox 63.0 for desktop and Android, just over a month since the release of Firefox 62.0. The release brings a range of changes. Some of these are cosmetic, some improve the user experience, while others should improve life for developers. There is no update for iOS, however - version 12.0 was released in June. What's new in Firefox 63.0 for desktop? According to the release notes, the update should have significant performance gains by moving the build infrastructure on Windows to the Clang toolchain. There's also been a small change, as the Firefox theme is now the same as the Windows 10 OS Dark and Light modes. For Mac users, Firefox should be a little faster. One of the reasons for this is that WebGL power preferences allow applications to request lower power GPUs in multi-GPU systems. This essentially means that the browser should be using resources in a much more efficient manner. Interestingly, Firefox also now has content blocking features for Mac users that will "offer users greater control over technology that can track them around the web." This feature will allow users to decide when to block tracking technologies and when to allow it. Read next: Is Mozilla the most progressive tech organization on the planet right now? For developers, meanwhile, Firefox has not only had a small facelift. The team have also decided to enable the accessibility inspector by default. This indicates how assistive technologies are becoming more and more important for web users. It also highlights that web accessibility is now a problem to be tackled head on - not ignored. What's new in Firefox 63.0 for Android? For Android users, Firefox has added support for picture-in-picture video and now uses notification channels. Read more about the new features and fixes on the Mozilla website.

Last week, Eagle, a Taiwan based startup, launched an application that helps designers better organize and manage their digital assets. These assets allow designers to use design mockups, inspirational images, pictures, screenshots, and user interfaces, easily on their desktops. The Eagle App is similar to the image version of ‘Evernote’ application. Eagle allows the use of folders, tags, colors and many other factors to manage, categorize and sort images. When in need of these images, users may use the powerful search engine to easily locate the desired image quickly. The application also supports Mac and Windows operating systems. The Eagle app helps users to keep their design files neat and tidy. It works with formats such as JPG, PNG, GIF, EPS, TIF, SVG, Photoshop, Adobe Illustrator, Keynote, PowerPoint, MP4, PDF, CINEMA 4D, and more. Augus Chen, Founder of Eagle, says, “Eagle helps you manage pictures, screenshots, user interfaces and designs that make your lightbulb shine. If you are a designer, you will definitely love this. It’s super easy to sync it through Google Drive, Dropbox, OneDrive or any other cloud storage service. Browser plug-ins and filtering functions save a lot of time for designers.” Key Features of Eagle App include: Browser Extension to save images and screenshots from any website. Save a bunch of images at once from a website. Drag & Drop images from other apps. Handy Clipboard to copy and paste any image you like. Add Tags to any image or a group of images to find them faster Smart Folders to organize and automatically filter images by name or tags Annotate ideas and suggestions on a specific area of an image Advanced Filter to search for images based on keywords, colors, image formats, etc. To know more about Eagle App in detail, visit its official website. NGINX Hybrid Application Delivery Controller Platform improves API management, manages microservices and much more! GNOME 3.32 says goodbye to application menus Netlify raises $30 million for a new ‘Application Delivery Network’, aiming to replace servers and infrastructure management

Last week, the Dojo community announced the release of Dojo 4.0. This version aims for better application optimization and analysis. It comes with better support for code splitting and Progressive Web Apps (PWAs), a redesigned Virtual DOM, and more. Also, TypeScript forwards-compatibility is updated from 2.7 to 3.0. Improved Dojo CLI tooling Separating an application into bundles, better know as code splitting has been possible since the previous versions of Dojo. To do this developers had to add some configuration to specify how the application should be bundled. Dojo 4.0 helps you to automatically split your application based on its top-level routes. cli-build-app, the CLI command for building optimized Dojo applications, provides this functionality out of the box. Additionally, a bundle analyzer is automatically generated when running a build in production. It will provide you even more insight into the bundles. CLI is further improved with support for externals, allowing non-modular libraries or standalone applications that cannot be bundled normally to be included in a Dojo application. Support for automatic parsing, hashing, and bundling of resources from index.html, and the inclusion of assets from the catch-all assets directory is also added. Support for old browsers by explicit opt-in Earlier, all browsers were supported by default. This behavior is now reversed and support for older browsers back to IE11 is available by explicit opt-in. This results in smaller and faster applications for newer browsers as they add support for features natively. Support for Progressive Web Apps The framework is now optimized for the PRPL pattern in order to support Progressive Web Apps (PWAs). PRPL is a pattern for structuring and serving PWAs, keeping the performance of app delivery and launch in mind. Here is what it stands for: Push critical resources for the initial URL route. Render initial route. Pre-cache remaining routes. Lazy-load and create remaining routes on demand. To get a better understanding of the PRPL pattern, you can check out the explanation on Google Developers. Updates in the Dojo Framework The @dojo/framework has also seen various updates and addition of new features: The Virtual DOM engine has been redesigned and rewritten from the ground up. This overhauled Virtual DOM comes with improved rendering performance and reduced overall size of the framework. A few improvements have been added when using the w() and v() pragmas. These include a better composition of nodes, rendering a dynamic import directly using w(), and enabling the use of meta for nodes that are passed as children to a widget. In this release, the routing system within the framework has received an improved route-matching algorithm. dojo/stores come with middleware support for Local storage in this release, and a new StoreProvider eases the injection of application state. The StoreProvider will be used as any widget to inject the store into the vdom tree using a render property. The existing Link component is refactored and an ActiveLink component is added that applies classes when the link's outlet is "active". Breaking changes The routing events are emitted after the routing navigation is completed. runAfterRenders is now private. Symbol usage in widget-core is now not allowed because symbol usage causes issues as they are unique for a specific version. In order to consolidate existing dojo/core modules, many modules have been removed. Instead, using alternatives such as a fetch polyfill is advised for consumers that need to support IE11. The Outlet is changed from a higher order component (HOC) to a standard component with a render property. Having an outlet as a HOC implies that it would be shared across the application, which generally they are not. Read the official announcement at Dojo’s official website and also check their release notes. npm at Node+JS Interactive 2018: npm 6, the rise and fall of JavaScript frameworks, and more Mozilla optimizes calls between JavaScript and WebAssembly in Firefox, making it almost as fast as JS to JS calls Vue.js 3.0 is ditching JavaScript for TypeScript. What else is new?

On 18th October Brave Software, announced the general availability of their latest browser- Brave 0.55. The ad-blocking Brave browser is redesigned to work on Chromium and is available for Windows, macOS, and Linux. Brave 0.55x was originally released to developers and early adopters on September 6th, and then as an initial beta for a larger base on September 27th. This Chromium-based desktop version replaces the previous Muon-based browser which is no longer available for download on the Brave site. Users who browse with Muon (latest version is 0.25.2) will continue to receive necessary updates until they are fully upgraded to this new release in the near future. The upgrade comes with significant performance boost as confirmed by a test conducted by Andrius Aucinas, a performance researcher at Brave, and Dr. Ben Livshits, Brave’s Chief Scientist. The test measured how quickly the browser loads the pages and how much resources it uses- specifically focusing on CPU usage. The test proves that the Brave browser has a 22% faster load time, which means 8-second faster page loading times on major sites. The other important upgrade was to the Bat Attention token (BAT) reward system, making it more intuitive. The team has introduced ‘Brave Rewards (beta)’ that will replace Brave Payments granting more usability, visibility, and new features. The release also includes multiple updates from the September 27th beta version: Better Interface including Tab shape and color changes, URL bar centered changes Several Tor-related privacy enhancements which include disabling features that can leak information like the IP address A private search engine can now be set separately PDF files can now load file:// URLs Removing links to unused sign-ins to Google Localization updates Multiple web compatibility fixes Various crash fixes To know more about this release, head over to Brave.com. You can find the entire release schedule on Github. Dejavu 2.0, the open source browser by ElasticSearch, now lets you build search UIs visually Opera Touch browser lets you browse with one hand on your iPhone, comes with e2e encryption and built-in ad blockers too! Vivaldi 2.0, a hyper-customizable browser, releases with Vivaldi Sync, Resizable Tab Tiling, and more!

After releasing Angular 7 beta in August, the Angular team released the stable version of Angular 7 yesterday. This version comes with a DoBootstrap interface, an update to XMB placeholders, and updated dependencies: TypeScript 3.1 and RxJS 6.3. Let's see what features this version brings in: The DoBootstrap interface Earlier, there was an interface available for each lifecycle hook but ngDoBootstrap was missing the corresponding interface. This release comes with the new lifecycle hook interface DoBootstrap. Here's an example using DoBootstrap: class AppModule implements DoBootstrap {  ngDoBootstrap(appRef: ApplicationRef) {    appRef.bootstrap(AppComponent);  } } An "original" placeholder value on extracted XMB XMB placeholders (<ph>) are now updated to include the original value on top of an example. By definition, placeholders have one example tag (<ex>) and a text node. The text node will be used as the original value from the placeholder, while the example will represent a dummy value. For example: compiler-cli An option is added to extend angularCompilerOptions in tsconfig. Currently, only TypeScript supports merging and extending of compilerOptions. This update will allow extending and inheriting angularCompilerOptions from multiple files. A new parameter for CanLoad interface In addition to Route, an UrlSegment[] is passed to implementations of CanLoad as a second parameter. It will contain the array of path elements the user tried to navigate to before canLoad is evaluated. This will help users to store the initial URL segments and refer to them later, for example, to go back to the original URL after authentication via router.navigate(urlSegments). Existing code still works as before because the second function parameter is not mandatory. Dependency updates The following dependencies are upgraded to their latest: angular/core now depends on TypeScript 3.1 and RxJS 6.3 @angular/platform-server now depends on Domino 2.1 Bug fixes Along with these added features, Angular 7 comes with many bug fixes, some of which are: Mappings are added for ngfactory and ngsummary to their module names in aot summary resolver. fileNameToModuleName lookups are now cached to save expensive reparsing of the file when not run as Bazel worker. It is allowed to privately import compile_strategy. Earlier, when an attempt was made to bootstrap a component that includes a router config using AOT Summaries, the test used to fails. This is fixed in this release. The compiler is updated to flatten nested template fns and to generate new slot allocations. To read the full list of changes, check out Angular’s GitHub repository. Angular 7 beta.0 is here! Why switch to Angular for web development – Interview with Minko Gechev ng-conf 2018 highlights, the popular angular conference

Chrome v8 7.0 is in beta and has added features like embedded built-ins and JavaScript language features. It will be in beta and will release with Chrome 70 Stable. A new branch of v8 is created every six weeks. Just before a Chrome Beta milestone release, each version is branched from the V8 master on GitHub. V8 7.0 was announced yesterday, and is filled with features to enhance the experience of developers. v8 7.0 brings embedded built-ins in Embedded builtins share the generated code across multiple V8 Isolates to save memory. Beginning from V8 v6.9 embedded built-ins are enabled on x64. With the exception of ia32, v8 7.0 brings memory savings to all other platforms. WebAssembly Threads preview WebAssembly enables code compilation of C++ other languages to run on the web. A very useful feature of native applications is the ability to use threads. It is a primitive for parallel computation. pthreads, a standard API for application thread management, is familiar to most C and C++ developers. The WebAssembly Community Group has been working to bring threads to the web in order to enable real multi-threaded applications. V8 has implemented required support for threads in the WebAssembly engine as part of this effort. To use this in Chrome, enable it via chrome://flags/#enable-webassembly-threads, or sign up for an Origin Trial. With Origin Trials developers can experiment with new web features before they are standardized. This also helps the creators gather real-world feedback critical to validate and improve new features. JavaScript features in V8 A description property will be added to Symbol.prototype to provide an ergonomic way of accessing Symbol description. Before this change, the description could be accessed only indirectly through Symbol.protoype.toString(). Array.prototype.sort is now stable in V8 v7.0. V8 used an unstable QuickSort for arrays with more than 10 elements. Now, the stable TimSort algorithm is in use. For more details, visit the v8 Blog. Google announces updates to Chrome DevTools in Chrome 71 Chrome 69 privacy issues: automatic sign-ins and retained cookies; Chrome 70 to correct these Origin DApp: A decentralized marketplace on Ethereum mainnet aims to disrupt gig economy platforms like Airbnb and Uber

After the release of Ember 3.4 earlier this month, the Ember project released version 3.5 of the three core sub-projects: Ember.js, Ember Data, and Ember CLI. This release boasts of up to 32% performance improvement in Ember CLI build and a new Ember Data which powers the addon developers. This version also kicks off the 3.6 beta cycle for all the three sub-projects. Additionally, Ember 3.4 is now promoted to LTS, which stands for Long Term Support. This means that Ember will continue to receive security updates for 9 release cycles and bug fixes for 6 cycles. Let’s now explore what updates have been added in this release: Updates in Ember.js 3.5 This version is an incremental and backwards compatible release with two small bug fixes. These bug fixes pave the way for new features in future releases. The following bugs are fixed in this release: In some cases Alias wouldn't teardown properly leaving unbalanced watch count in meta. This is now fixed. Naming routes as "array" and "object" is allowed. Updates in Ember Data 3.5 This release hits two milestones: the very first LTS release of ember-data and the RecordData interfaces. RecordData RecordData provides addon developers the much-needed API access with more confidence and stability. This new addition will facilitate developers to easily implement many commonly requested features such as improved dirty-tracking, fragments, and alternative Models in addons. With this new feature added, the Ember developers are thinking of deprecating and removing the use of private but intimate InternalModel API. Also, be warned that this change might cause some regressions in your applications. RecordData use with ModelFragments Most of the community addons work with RecorData versions of ember-data, but currently it does not work with ember-data-model-fragments. In case you are using this addon, it is advisable to stay on ember-data 3.4 LTS until the community has released a version compatible with RecordData. Updates in Ember CLI 3.5 Three new features have been added in this Ember CLI 3.5: Upgraded to Broccoli v2.0.0 Earlier, tools in the Ember Ecosystem relied on a fork of Broccoli. But, from this release, Ember CLI uses Broccoli 2.0 directly. Build speed improvements up to 32% Now, developers will see some speed improvements in their builds, thanks to Broccoli 2! Broccoli 2 allows Ember CLI to use the default system temp directory, instead of a ./tmp directory local to a project folder. Users may see up to 32% improvements in build time, depending on computer hardware. Migrated to ember-qunit As all of the main functionality lives in ember-qunit while ember-cli-qunit is just a very thin shim over ember-qunit, Ember CLI is migrated to ember-qunit. It now uses ember-qunit directly and ultimately ember-cli-qunit would become deprecated. To read the full list of updates, check out the official announcement by the Ember community. The Ember project announces version 3.4 of Ember.js, Ember Data, and Ember CLI Ember project releases v3.2.0 of Ember.js, Ember Data, and Ember CLI Getting started with Ember.js – Part 1

Yesterday, InfernoJS community announced the release of InfernoJS v6.0.0. This version comes with Fragments using which you can group a list of children without adding extra nodes to the DOM. Three new methods have been added: createRef, forwardRef, and rerender, along with few breaking changes. Added support for Fragments Support for Fragments, a new type of VNode, is added. It will enable you to group a list of children without adding extra nodes to the DOM. With Fragments, you can return an array from Component render creating an invisible layer which ties its content together but will not render any container to actual DOM. Fragments can be created using the following four ways: Native Inferno API: createFragment(children: any, childFlags: ChildFlags, key?: string | number | null) JSX: <> ... </>, <Fragment> .... </Fragment> or <Inferno.Fragment> ... </Inferno.Fragment> createElement API: createElement(Inferno.Fragment, {key: 'test'}, ...children) Hyperscript API: h(Inferno.Fragment, {key: 'test'}, children) createRef API Refs provide a way to access DOM nodes or React elements created in the render method. You can now create refs using createRef() and attach them to React elements via the ref attribute. This new method allows you to write nicer syntax and reduces code when no callback to DOM creation is needed. forwardRef API forwardRef API allows you to “forward” ref inside a functional Component. This new method will be useful if you want to create a reference to a specific element inside simple functional Components. Forwarding ref means, automatically passing a ref through a component to one of its children. rerender With the help of the rerender method, all the pending setState calls will be flushed and rendered immediately. You can use it in the cases when the render timing is important or to simplify tests. New lifecycle Old lifecycle methods, componentWillMount, componentWillReceiveProps, or componentWillUpdate, will not be called when the new lifecycle methods, getDerivedStateFromProps or getSnapshotBeforeUpdate are used. What are the breaking changes? Since not all applications need server-side rendering, hydrate is now a part of the inferno-hydrate package. Style properties now use hyphen. For example, backgroundColor => background-color. In order to support JSX Fragment syntax, babel-plugin-inferno now depends on babel v7. setState lifecycle is changed to have better compatibility with ReactJS. Also, componentDidUpdate will now be triggered later in the lifecycle chain, after refs have been created. String refs are completely removed. Instead, you can use callback refs, createRef API, or forward Refs. Read the release notes of InfernoJS on its GitHub repository. Node.js v10.12.0 (Current) released The Ember project announces version 3.4 of Ember.js, Ember Data, and Ember CLI React Native 0.57 released with major improvements in accessibility APIs, WKWebView-backed implementation, and more!

Walt, an alternative syntax for WebAssembly text format, was introduced today. It allows developers to use JavaScript syntax to write to as “close to the metal” as possible. Its ultimate goal is to make WebAssembly accessible to regular JavaScript programmers. Written 100% in JavaScript it requires no LLVM/binary toolkits. What Walt tries to solve? Writing zero-overhead, optimized WebAssembly code is difficult. You need to write very plain C code, compile that to .wast and then optimize that result. Then, finally, you're ready to compile that into the final WebAssembly binary. Walt attempts to take C/Rust out of the equation and write “as close to the metal” as possible without losing readability. How it solves the problem? What Walt does is, it provides a thin layer of syntax sugar on top of .wat text format. This improved syntax will give developers direct control over the WebAssembly output. This means that there should be minimal to none post optimization to be done to the wast code generated. For example, here is what a .walt module, which exports a recursive Fibonacci function, looks like: Source: GitHub When this code is passed through the Walt compiler, you get a buffer which can be used to create a WebAssembly module with a fibonacci export. Al this is done with familiar JS syntax and without any external binary toolkits. What are some of its use cases? Anyone who is interested in WebAssembly but is not familiar with system languages can get a quick start with Walt. It can be used in the following scenarios: Web/Node libraries Games Web VR/AR Projects depending on heavy real-time computation from complex UIs to 3D visualizations To know more about Walt and how you can get started with it, check out its GitHub repository. Introducing Wasmjit: A kernel mode WebAssembly runtime for Linux Unity Benchmark report approves WebAssembly load times and performance in popular web browsers Why is everyone going crazy over WebAssembly?

The Google Chrome team announced new updates and changes to the Chrome DevTools in Chrome 71, today.  The latest update explores features such as hovering over a Live Expression to highlight the DOM node, storing DOM nodes as global variables, Initiator and priority information in HAR imports and exports, and Picture-in-Picture breakpoints among others. Let’s discuss these features in the latest update to DevTools in Chrome 71. Hovering over Live Expression to highlight DOM node Now when an Expression evaluates to a DOM node, hovering over the Live Expression will result in highlighted DOM node in the viewport. Storing DOM nodes as global variables You can now store DOM nodes as a global variable. All you need to do is run an expression in the console that evaluates to a node. Then right-click the result and select Store as the global variable. Alternatively, you can also right-click the node in the DOM Tree and then select Store as a global variable. Initiator and priority information available in HAR imports and exports DevTools now comprises initiator and priority information in the HAR file on exporting a HAR file. Once done importing the HAR files back into DevTools, the Initiator and Priority columns gets populated. The _initiator field offers information behind the cause of the requested resource. The _priority field states the priority level that the browser assigned to the resource. Accessing Command Menu from the Main Menu Command Menu provides a fast way to access DevTools panels, tabs, and features. Now, you can open the Command Menu directly from the Main Menu. Click the main button on the main menu and select Run command. “Add to homescreen" now called "Trigger beforeinstallprompt" There’s an Add to homescreen button on the Manifest tab which is renamed to Trigger beforeinstallprompt as it is more semantically accurate. For more information, check out the official update notes. Chrome 69 privacy issues: automatic sign-ins and retained cookies; Chrome 70 to correct these Google announces Chrome 67 packed with powerful APIs, password-free logins, PWA support, and more Google Chrome’s 10th birthday brings in a new Chrome 69

Yesterday, Mozilla announced that in the latest version of Firefox Beta, calls between JS and WebAssembly are faster than non-inlined JS to JS function calls. They have made these optimizations keeping two aspects of engine’s work in mind: reducing bookkeeping and cutting out intermediaries. How they made WebAssembly function calls faster They have optimized the calls in both directions, that is, from JavaScript to WebAssembly and WebAssembly to JavaScript with their recent work in Firefox. All these optimizations have been done to make the engine’s work easier. The improvements fall into two groups: Reducing bookkeeping: This means getting rid of unnecessary work to organize stack frames Cutting out intermediaries: This means taking the most direct path between functions How they optimized WebAssembly to JavaScript calls The browser engine has to deal with two different kinds of languages while going through your code even if the code is all written in JavaScript: bytecode and machine code. The engine needs to be able to go back and forth between these two languages. When it does these jumps, it needs to have some information in place, like the place from where it needs to resume. The engine also must separate the frames that it needs. To organize its work, the engine gets a folder and puts this information in it. When the Firefox developers first added WebAssembly support, they had a different type of folder for it. So even though JIT-ed JavaScript code and WebAssembly code were both compiled and speaking machine language, it was treated as if they were speaking different languages. This was unnecessarily costly in two ways: An unnecessary folder is created which adds up setup and teardown costs It requires trampolining through C++ to create the folder and do other setup They fixed this by generalizing the code to use the same folder for both JIT-ed JavaScript and WebAssembly. This made calls from WebAssembly to JS almost as fast as JS to JS calls. How they optimized JavaScript to WebAssembly calls JavaScript and WebAssembly use different customs even if they are speaking the same language. For instance, to handle dynamic types, JavaScript uses something called boxing. As JavaScript doesn’t have explicit types, they need to be figured out at runtime. To keep track of the types of values, the engine attaches a tag to the value. This turns one simple operation into four operations. This is the reason why WebAssembly expects parameters to be unboxed and doesn’t box its return values. Since it is statically typed, it doesn’t need to add this overhead. So, before the engine gives the parameters to the WebAssembly function, the engine needs to unbox the values and put them in registers. It has to go through C++ again to prepare the values when going from JS to WebAssembly. Going to this intermediary step is a huge cost, especially for something that’s not that complicated. To solve this, they took the code that C++ was running and made it directly callable from JIT code. So, when the engine goes from JavaScript to WebAssembly, the entry stub unboxes the values and places them in the right place. Along with these calls, they have also optimized monomorphic and built-in calls. To understand the optimizations well, check out Lin Clark’s official announcement on Mozilla’s website. Mozilla updates Firefox Focus for mobile with new features, revamped design, and Geckoview for Android Mozilla releases Firefox 62.0 with better scrolling on Android, a dark theme on macOS, and more Mozilla, Internet Society, and web foundation wants G20 to address “techlash” fuelled by security and privacy concerns