Tech News - Front-End Web Development

React Conf 2018 was held on October 25-26 in Henderson, Nevada USA. In this conference, the React team introduced Hooks, that allows you to use React without classes. On the second day, they spoke about time slicing, code-splitting, and introduced the React Cache and Scheduler APIs that we will see in the coming releases. Day 1: Unveiling Hooks React conf 2018 was kick-started by Sophie Alpert, Engineering Manager at Facebook. She highlighted that many big companies like Amazon, Apple, Facebook, Google are using React and that there has been a huge increase in npm downloads. React’s primary mission is to allow web developers to create great UIs. This is enabled by these three properties of React: Simplifying things that are difficult Focusing on performance Developer tooling But there are still few limitations in React that need to be addressed to achieve the mission React aims for. It doesn’t provide a stateful primitive that is simpler than class component. One of the earlier solutions to this was Mixins, but it has come to be known for introducing more problems than solving the problems. Here are the three limitations that were discussed in the talk: Reusing logic between multiple components: In React, sharing code is enabled by two mechanisms, which are higher-order components and render props. But to use them you will need to restructure your component hierarchy. Giant components: There are many cases when the components are simple but grow into an unmanageable mess of stateful logic and side effects. Also, very often we see the lifecycle methods ending up with a mix of unrelated logic. This makes it quite difficult to break these components into smaller ones because the stateful logic is all over the place. Confusing classes: Understanding classes in JavaScript is quite difficult. Classes in JavaScript work very differently from how they work in most languages. You have to remember to bind the event handlers. Also, classes make it difficult to implement hot-reloading reliably. In order to solve these problems in React, Dan Abramov introduced Hooks, followed by Ryan Florence demonstrating how to refactor an application to use them. Hooks allows you to “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. Day 2: Concurrent rendering in React On day 2 of the React Conf, Andrew Clark spoke about concurrent rendering in React. Concurrent rendering allows developers to invest less time thinking about code, and focus more on the user experience. But, what exactly is concurrent rendering? Concurrent rendering can work on multiple tasks at a time, switching between them according to their priority. With concurrent rendering, you can partially render a tree without committing the result to the DOM. It does not block the main thread and is designed to solve real-world problems commonly faced by UI developers. Concurrent rendering in React is enabled by the following: Time Slicing The basic idea of time slicing is to build a generic way to ensure that high-priority updates don't get blocked by a low-priority update. With time slicing the rendered screen is always consistent and we don’t see visual artifacts of slow rendering causing a poor user experience. These are the advantages time slicing comes with: Rendering is non-blocking Coordinate multiple updates at different priorities Prerender content in the background without slowing down visible content Code-splitting and lazy loading with lazy() and Suspense You can now render a dynamic import as a regular component with the React.lazy() function.  Currently, React.lazy only supports default exports. You can create an intermediate module to re-export a module that uses named exports. This ensures that tree-shaking keeps working and that you don’t pull in unused components. By the time a component renders, we must show some fallback content to the user, for example, a loading indicator. This is done using the Suspense component. It is a way for components to suspend rendering while they load async data. It allows you to pause any state update until the data is ready, and you can add async loading to any component deep in the tree without plumbing all the props and state through your app and hoisting the logic. The latest React 16.6 comes with these two features, that is, lazy and Suspense. Hooks was recently released with React 16.7-alpha. In the coming releases, we will see two new APIs called React Cache and Scheduler. You can watch the amazing demos by the React developers, to understand these new concepts in more detail. React introduces Hooks, a JavaScript function to allow using React without classes 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

It’s finally here! Microsoft just released the latest version of their favorite web development language almost 2 years after TypeScript 2.0 was announced. TypeScript 3.0 comes with plenty of new features and a few breaking changes. The release candidate for 3.0 which was released a few weeks before introduced some new features such as project reference functionality, extracting and spreading parameter lists using tuples, and support for the JSX defaultProps. This final release brought in some new features which makes this new version much more exciting, especially when we consider the changes brought in to improve the developer experience. Improved errors and UX When you see ‘improved errors’ in a feature set, you might think, “Okay, so even now we get errors, but in a better way”. But that is not exactly what the TypeScript team meant. Improving the error messages had been one of the biggest agenda for this release and the TypeScript team has not let us down by introducing related error spans and improved messages and collaboration. Related error spans and elaborated error messages An error can occur due to multiple reasons. One of those reasons and a pretty important one is error coming from different parts of the code. Related error spans are a new way to surface that information to users. In TypeScript 3.0, error messages can provide messages on other locations so that users can reason about cause-and-effect of an error. Since TypeScript 2.9, the team at Microsoft has been investing more resources on how to provide better and accurate error messages, which would lead to faster resolution time. By taking a core set of cases that give a smarter, cleaner, and more accurate error experience. Editor Productivity Writing code with TypeScript has always been a pleasant experience since the language leverages its syntactic and semantic knowledge, which allows one to write code more easily. Editors like Visual Studio, Visual Studio Code, and others with a TypeScript plugin to provide things users love like code completion, Go to Definition, and even quick fixes and refactorings. Building on this same trend, TypeScript 3.0 brings in new features like Named import refactorings, productivity features around JSX like providing completions for JSX closing tags, and Quick fixes for unreachable code and unused labels. Over the last few years, TypeScript has been slowly creeping into more and more web development projects with a clear advantage over JavaScript. Big time frameworks like Angular, React, and now Vue.js have started providing support for this next generation programming language. With this new release, TypeScript looks all set for total domination on the web frontier. For more information on the final TypeScript 3.0 release, check out the official Microsoft Blog. Read Next: TypeScript 3.0 release candidate is here How to work with classes in Typescript Microsoft launches Quantum Katas, a programming project to learn Q#, its Quantum programming language

WebAssembly is changing the way we use develop applications for the web. Graphics heavy applications, browser based games, and interactive data visualizations seem to have found a better way to our UI - the WebAssembly way. The latest Blazor 0.6 experimental release from Microsoft is an indication that Microsoft has identified WebAssembly as one of the upcoming trends and extended support to their bevy of developers. Blazor is an experimental web UI framework based on C#, Razor, and HTML that runs in the browser via WebAssembly. Blazor promises to greatly simplify the task of building, fast and beautiful single-page applications that run in any browser. The following image shows the architecture of Blazor. Source: MSDN Blazor has its own JavaScript format - Blazor.js. It uses mono, an open source implementation of Microsoft’s .NET Framework based on the ECMA standards for C# and the Common Language Runtime (CLR). It also uses Razor, a template engine that combines C# with HTML to create dynamic web content. Together, Blazor is promising to create dynamic and fast web apps without using the popular JavaScript frontend frameworks. This reduces the learning curve requirement for the existing C# developers. Microsoft has released the 0.6 experimental version of Blazor on October 2nd. This release includes new features for authoring templated components and enables using server-side Blazor with the Azure SignalR Service. Another important news from this release is that the server side Blazor model will be included as Razor components in the .Net core 3.0 release. The major highlights of this release are: Templated components Define components with one or more template parameters Specify template arguments using child elements Generic typed components with type inference Razor templates Refactored server-side Blazor startup code to support the Azure SignalR Service Now the important question is how is this release going to fuel the growth of WebAssembly based web development? The answer is that probably it will take some time for WebAssembly to become mainstream because this is just the alpha release which means that there will be plenty of changes before the final release comes. But why Blazor is the right step ahead can be explained by the fact that unlike former Microsoft platforms like Silverlight, it does not have its own rendering engine. Hence pixel rendering in the browser is not its responsibility. That’s what makes it lightweight. Blazor uses the browser’s DOM to display data. However, the C# code running in WebAssembly cannot access the DOM directly. It has to go through JavaScript. The process looks like this presently. Source: Learn Blazor The way this process happens, might change with the beta and subsequent releases of Blazor. Just so that the intermediate JavaScript layer can be avoided. But that’s what WebAssembly is at present. It is a bridge between your code and the browser - which evidently runs on JavaScript. Blazor can prove to be a very good supportive tool to fuel the growth of WebAssembly based apps. Why is everyone going crazy over WebAssembly? Introducing Wasmjit: A kernel mode WebAssembly runtime for Linux Unity Benchmark report approves WebAssembly load times and performance in popular web browsers

Yesterday, the Tor team announced the release of Tor Browser 8.5, which marks the first stable release for Android. Tor Browser 8.5 was also released for other platforms with more accessible security settings and a revamped look. https://twitter.com/torproject/status/1130891728444121089 The first alpha version of Tor Browser 8.5 for Android came out in September last year. After being in the alpha testing phase for almost 8 months, this version aims to provide phone users the same level of security and privacy as the desktop users enjoy. Announcing the release, the team wrote, “Tor Browser 8.5 is the first stable release for Android. Since we released the first alpha version in September, we've been hard at work making sure we can provide the protections users are already enjoying on the desktop to the Android platform.” The browser ensures security by preventing proxy bypasses. It comes with first-party isolation to protect users from cross-site tracking and fingerprinting defenses to prevent digital fingerprinting. Though the Android version was released with various security features, it does lacks some Desktop features that we will see coming in the subsequent releases. Across all the platforms, this version comes with improved security slider accessibility. Earlier it was behind the Torbutton menu, which made it difficult to access. Along with this change, the Tor Browser also comes with few cosmetic changes. The user interface is similar to that of Firefox’s Photon UI and also has redesigned logos. The team further shared that, the other most popular mobile operating systems, iOS will not be getting Tor Browser any time soon as it is too restrictive. Users can instead use the Onion Browser. Read also: Understand how to access the Dark Web with Tor Browser [Tutorial] You can download Tor Browser 8.5 from the Tor Browser download page and distribution directory. The Android version is also available on the Google Play Store. Read the full announcement on Tor’s official website. Mozilla makes Firefox 67 “faster than ever” by deprioritizing least commonly used features Firefox 67 will come with faster and reliable JavaScript debugging tools Mozilla developers have built BugBug which uses machine learning to triage Firefox bugs  

On Monday, Kadir Topal, a Senior Product Manager at Mozilla announced that the new React frontend of MDN Web Docs is now in Beta. MDN Web Docs, formerly known as Mozilla Developer Network, is the one-stop for web developer documentation. Mozilla has been working on replacing the jQuery library with React for months now to provide developers a customized MDN experience while still ensuring faster page loading time. MDN has two modes: editing and viewing. While viewing is used by most developers visiting the site, only a small fraction of them use the editing mode. This is why the team broke these two use cases into different domains. You can access the editing mode on wiki.developer.mozilla.org and the viewing mode on beta.developer.mozilla.org. The team plans to decommission beta.developer.mozilla.org after the testing phase is complete. The editing mode will continue to be served by the old frontend wiki.developer.mozilla.org. The discussion on this decision started earlier this year. While many praised it for this move, many felt that as a promoter of web standards it shouldn’t overlook web components for a custom framework. A developer commented on MDN’s GitHub repository, “As a user, I would like to see Mozilla that uses web standards to promote web standards. As a developer, I would like to see Mozilla and their developers using web standards and promote them. I don't need to see the nth React project.” Another developer commented, “The message that the No. 1 resource for Web development is ditching the same Web technologies it advocates, would be as disastrous as that, implicitly claiming a defeat for the Web, hence seppuku in the long term for the platform nobody would care much anymore.” In its support a developer remarked, “At the end of the day, none of us should care what MDN uses - we should care that the devs who have put so much effort into building a resource that has massively contributed to our own education and will continue to do so on a daily basis are productive and happy.” David Flanagan, one of the developers behind this project, affirmed that this decision was purely pragmatic. Flanagan shared that the MDN team is very tiny and they only had occasional help from volunteer contributions. Choosing React for MDN’s frontend may bring more contributors, he believed. He said, “Fundamentally, I'm asking you all to trust us. We're hoping to do great things this year with MDN, and I think that the vast majority of our users will love what we do. Thank you for reading this far, and thank you for your passion about web standards and MDN.” The team is now seeking developers’ feedback on this release. In case of any issue, you can file a bug, reply on Discourse, or also contact Topal on Twitter. Mozilla announces a subscription-based service for providing ad-free content to users Mozilla launches Firefox Preview, an early version of a GeckoView-based Firefox for Android Mozilla makes Firefox 67 “faster than ever” by deprioritizing least commonly used features

Last week, the team behind Babel announced the release of Babel 7.5.0. This release ships with improved support for a few ECMAScript proposals including the F# variant of the Stage 1 pipeline operator and an official plugin for the Stage 4 dynamic import() proposal. It also comes with an experimental TypeScript namespaces support. Following are some of the highlights from Babel 7.5.0: F# pipeline operator The pipeline operator proposal introduces a syntactic sugar (|>) for greater readability when chaining several functions together. This operator is similar to F#, OCaml, Elixir, Elm, Julia, Hack, and LiveScript, as well as UNIX pipes. Starting from the 7.0.0-beta release, Babel had the “minimal” variant of the pipeline operator proposal. Then came the “Smart” variant in Babel 7.3.0 and with this release we have the F# variant. The difference between the smart and F# variant is that the latter uses the concept of arrow functions instead of "topic references" (#). “This has the advantage of being more similar to current JavaScript, at the cost of a slightly less concise syntax,” the team explained as the advantage for this change. You can test this new variant by adding ‘@babel/plugin-proposal-pipeline-operator’ to your Babel configuration. You can also try it out in the REPL by enabling the "Stage 1" preset. Dynamic import transform Though Babel has support for parsing dynamic imports, it does not provide a consistent way to transform them. It allows parsing import(foo), but asks developers to use webpack or ‘babel-plugin-dynamic-import-node’ to transpile it. To solve this problem, Babel 7.5.0 introduces the ‘@babel/plugin-proposal-dynamic-import’ plugin, which you can use alongside one of the module transform plugins. Experimental TypeScript namespaces support When TypeScript support initially came to Babel, it did not include namespaces as they require type information that can only be provided by a full TypeScript compiler and type-checker. Starting from Babel 7.5.0, you can enable experimental support for namespaces in the TypeScript plugin using the ‘allowNamespaces’ option of ‘@babel/plugin-transform-typescript’. However, there are some limitations in this experimental support that you need to keep in mind: one, namespaces can only export immutable bindings and second, when merging multiple namespaces with the same name, their scope isn't shared. These were some of the updates in Babel 7.5.0. To know more in detail check out the official announcement and also the release notes. Babel 7 released with Typescript and JSX fragment support How to create a native mobile app with React Native [Tutorial] Meteor 1.8 addresses technical debt of 1.7 with delayed legacy builds, upgraded to Babel 7, Mongo 4

Yesterday, Kamil Mielnik, a JavaScript Developer who specializes in React technology stack, introduced a new automated refactoring tool for React and Redux called R-Factor. Just like C# and Java programmers, who are spoiled with a variety of refactoring tools, JavaScript developers can use this tool to save their time. With this refactoring tool, React developers will not have to spend time writing very common code manipulations. R-Factor does not break your code, keeps your formatting, and can refactor a file in a reasonable amount of time. It comes with a set of 20 automated refactorings. Out of this 20 automated refactorings, 10 are for React components, 8 are for Redux, and the remaining two are other refactorings. It also provides 16 configuration options, using which you can match your code formatting, naming, and other preferences. Though the initial goal of this tool was to only cover React and Redux refactoring, in the future, we could see some features going beyond React and Redux. Following are some of the refactorings that are introduced: Add className: This will add the className prop to a component and apply it to its root JSX element. Convert SVG to component: With this refactoring, you can convert an SVG into a React component. Convert to arrow component: This will turn a component into a functional component defined as an arrow function. Convert to function component: You can convert a component to a functional component defined as a function. Connect: This connects a component to the Redux store with both mapStateToProps & mapDispatchToProps generated. This refactoring tool is supported on Windows, Linux, and macOS and the supported editors include Atom, Sublime Text 3, and VSCode. For using the R-Factor tool, you need to buy the license key. Before you actually start using it on your project, you can try the R-Factor tool online. To know more in detail, check out the official website of R-Factor. React Native 0.59 RC0 is now out with React Hooks, and more Reactive programming in Swift with RxSwift and RxCocoa [Tutorial] React 16.8 releases with the stable implementation of Hooks

The Node.js team have announced new updates about their August 2018 releases. Per their blog, new versions for each of their supported lines will be released on, or shortly after, the 15th of August, 2018. These releases will address flaws of low severity mostly incorporating a number of security fixes and an upgraded version of OpenSSL. However, the Node.js 10 Current release will not be limited to only security-related updates, as per policy for non-LTS release lines. The releases will also include disclosure of details of the flaws addressed, allowing users to assess the severity of the impact on their own applications. Upgrades to OpenSSL There are two new upgrades to OpenSSL. OpenSSL 1.1.0i and 1.0.2p will be made available on the 14th of August, 2018. These releases will cover three low severity security fixes. Out of these three, two releases are relevant to Node.js users. Client DoS due to large DH parameter: During key agreement in a TLS handshake using a DH(E) based ciphersuite, a malicious server can send a very large prime value to the client. This will cause the client to spend an unreasonably long period of time generating a key, resulting in a hang until the client has finished. This could be exploited in a Denial Of Service attack. ECDSA key extraction via local side-channel: The OpenSSL RSA Key generation algorithm is vulnerable to a cache timing side channel attack. An attacker with sufficient access to mount cache timing attacks during the RSA key generation process could recover the private key. All versions of Node.js 6.x (LTS "Boron") and 8.x (LTS "Carbon") are impacted via OpenSSL 1.0.2. OpenSSL 1.1.0 impacts all versions of Node.js 10.x (Current). All OpenSSL fixes are available on the OpenSSL git repository. Security inclusions in Node.js Apart from OpenSSL upgrades, the August 2018 upgrades also feature security inclusions: Unintentional exposure of uninitialized memory Out of bounds (OOB) write All actively supported release lines of Node.js are impacted by these flaws. Additional inclusions In addition to OpenSSL and security upgrades, the following items are also included for LTS release lines: In inspector the bind address is changed from 0.0.0.0 to 127.0.0.1 so that the bind address can be overridden by the user. This upgrade impacts Node.js 6.x (LTS "Boron") only. In test, keys/Makefile, are updated to clean and build all. This upgrade impacts the test suite for all actively supported release lines of Node.js. The announcement can be read at the Node.js Blog. You can also have a look at the current security policy. Node 10.0.0 released, packed with exciting new features Deploying Node apps on Google App Engine is now easy How is Node.js Changing Web Development?

Last week, Anthony Gore, a Vue Community Partner shared what he calls a "knowledge map" capturing the key areas of professional Vue.js development. This map lists key areas you should target if you are planning to develop Vue apps in 2019. The following diagram shows the developer map: Source: Vue.js Developers Basics of JavaScript and web development Vue.js is an open-source JavaScript framework, which is used for building user interfaces. As it is a JavaScript framework, developers need to have a basic understanding of JavaScript and also of web development. Essential concepts New Vue developers should first focus on the following concepts: Core features: To begin with, you will need to know how to install Vue in a web page and understand the lifecycle of a Vue instance. Also, learn key features of the core such as reactive data, directives, and interpolations. Components: Components are reusable and isolated UI elements. Learn how to declare components and communicate between them through props and events. To build robust and scalable applications you need to learn how to compose with components. Single-page applications (SPAs): In the SPA architecture a single web page acts like a traditional multi-page website. After creating the "pages" as components, you can map them to a unique path with Vue Router, a tool for building SPAs. State management: As your app grows, managing global state becomes difficult and components become bloated with props and event listeners. A design pattern called Flux keeps your data in a predictable and stable central store. The Vuex library helps you implement the Flux architecture in your app. Building real-world Vue apps The concepts in the previous part guide you in building apps that are high performing and efficient, but on the local server. To make your apps production ready you need to learn the following concepts: Project scaffolding: As you start building frequently in Vue, you will have to do the similar configurations and setups in many projects. To make this process easier, we have a tool called Vue CLI for quickly scaffolding single page applications. Full-stack/authenticated apps: Often apps in production will have data-driven user interfaces and the data will be sourced from a secure API. These API will be made with Node, Laravel, Rails, Django or some other server framework. So, you should also learn the common design patterns used to integrate Vue into a full-stack configuration. Testing: If you want your apps to be both maintainable and stable, you need to provide tests. For testing, you can utilize a tool called Vue Test Utils that enables you to create and run tests on isolated components. Optimization: Once your app is deployed on a remote server, it will not have the same speed and efficiency that it showed while testing. You need to optimize the app by using a variety of techniques including server-side rendering, async components, and render functions. Commonly used tools Senior developers should be familiar with the key tools that will be part of almost every Vue-based project. Some of these tools are: Modern JavaScript and Babel: To take advantage of new browser capabilities, you can build your apps using the latest JavaScript standard, ES2015, and proposed features from ES2016 and beyond. For supporting older browsers, you can use the tool named Babel. Its function is to transpile (translate and compile) your modern features into standard features. Webpack: If your code is written across different modules, you can use Webpack to build them into a single file that is readable by a browser. It also works as a build pipeline, allowing you to transform code before it is built and can also be used to optimize your app with a series of plugins. TypeScript: As reported in October, Vue 3 will be written entirely in TypeScript. This implies that to contribute and understand inner workings of Vue you will need to understand TypeScript as well. Important frameworks Many frameworks are available to automate common tasks and save time. Some of the most widely used and important ones are: Nuxt.js: This framework provides various cutting-edge features like component-based routing, server-side rendering, and code splitting out-of-the-box. Vuetify: It is a material framework for Vue, which is based on Google’s Material Design Spec. Vuetify provides an easy-to-remember semantic design to quickly build Vue apps with Material Design layout and styling. NativeScript-Vue: If you want to use Vue for native mobile interfaces, you can do so with the NativeScript-Vue framework. NativeScript is a JavaScript framework for building apps using native user interface components on iOS and Android. NativeScript-Vue is built on top of NativeScript, providing use of Vue syntax and components. After learning all these concepts and tools, you can develop plugins, learn about animations, or more advanced concepts like progressive web apps (PWAs). To know more in detail about the Vue knowledge map, check out Mr. Gore’s post. Introducing Vue Native for building native mobile apps with Vue.js React vs. Vue.js: JavaScript framework wars Evan You shares Vue.js 3.0 updates at VueConf Toronto 2018

Yesterday, the Facebook Open Source team announced that they will no longer be able to contribute to the open source development of the Nuclide extension, Atom IDE, and other associated repos. https://twitter.com/fbOpenSource/status/1072928679695548416 Nuclide is a code editor built as a suite of features on top of the Atom text editor to provide hackability and the support of an active community. Facebook developed Nuclide to provide a first-class unified development environment for React Native, Hack, and Flow projects. Nuclide was first created for Facebook’s internal engineers and then was later open sourced in the hopes that others could also benefit from it too. In their announcement, Facebook told that this decision was made because they were not able to pay much attention to the project. They added, “However, our team has not been able to give this project the amount of attention and responsiveness it deserves and as a result, we’ve made the difficult decision to retire Nuclide and associated repos, such as the Atom-IDE packages.” Though they are not going to contribute to the Nuclide open source project, Facebook will continue to use it internally: https://twitter.com/amasad/status/1072930703065501696 The latest release, that is, Nuclide 0.366 will be the last release by Facebook. They have made its source code available in the Facebook Open Source Archive. The language and debugging services will still be supported in Atom and other compatible IDEs such as Microsoft Visual Studio Code or the clients listed on Langserver.org. Users on Hacker News are speculating that maybe this is the time to adopt VSCode and the main reason is that it provides good integration with TypeScript. Here’s what a user said, “A shame, in an ideal world there would be the benefit of outside contributions that made less internal work needed, so overall would be a win for Facebook. But probably this is related to Atom itself being taken over by VSCode, the number of users (and maybe contributors) appears to be going down.” Read the official announcement by Facebook on Nuclide’s website. Facebook’s artificial intelligence research team, FAIR, turns five. But what are its biggest accomplishments? Facebook AI research and NYU school of medicine announces new open-source AI models and MRI dataset as part of their FastMRI project Facebook plans to change its algorithm to demote “borderline content” that promotes misinformation, and hate speech on the platform

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!

Version 6.1.0 of the popular JavaScript framework Angular is here. The latest version released yesterday mainly focuses on bug fixes, new features, and support for TypeScript. Let’s discuss these major updates that come with Angular 6.1.0. In the new version, a KeyValuePipe has been introduced. Support is now offered for  // ... and // TODO in mock compiler expectations. An urlUpdateStrategy feature have been added to the Angular router which allows you to update the browser URL at the beginning of navigation. Feature defaultKeyValueDiffers has been exported to private API. Angular 6.1.0 enables developers to configure the Angular Router so that it remembers the scrolling position of the user as he/she navigates through an application. You can reset the scroll position with the new navigation event and can restore the previous position on pressing the back button. In addition to these updates, View Encapsulation with ShadowDOM v1 is the new standard. ShadowDOM provides better cross-browser support. Due to this reason, the ViewEncapsulation.Native feature has been deprecated. View encapsulation is the process which associates Cascading Style Sheets (CSS) with the components in which they are defined. The KeyValueDiffer#diff feature now allows null values. The new release also offers support for TypeScript 2.9, and 2.8 in addition to 2.7. Apart from these, there are also other breaking changes and bug fixes. Other Changes Under animation, the end-state styles for orphaned DOM nodes have been rendered. The queried element styles in safari/edge have been properly cleaned up in the latest release. typescript is used to resolve the modules for metadata. Mark Meta and Title services are marked as tree shakable provider. versionedFiles in asset-group resources have been deprecated. SwPush.unsubscribe() has been fixed. To use @angular/bazel rules, you need to add calling ng_setup_workspace() in your WORKSPACE file. Angular 7 will be released sometime in September/October 2018. For a complete list of changes and bug fixes, check out the official release notes.    Angular 6 is here packed with exciting new features! Everything new in Angular 6: Angular Elements, CLI commands and more  

Last week, Mozilla announced the release of Firefox 67, with many performance enhancing features to make Firefox “faster than ever”. On Thursday, Nathan Egge and Christopher Montgomery wrote a blogpost explaining the importance of high performance, royalty free AV1 video decoder, called ‘dav1d’. This feature is now enabled by default on all desktop platforms of Mozilla (Windows, OSX and Linux) for both 32-bit and 64-bit systems. AV1 allows high-quality video experience with very less network usage. It’s files are 30% smaller than today’s most popular web codec VP9. AV1 is also 50% smaller than its widely deployed predecessor H.264. AV1 has the potential to transform how and where we watch videos on the internet. ‘Dav1d’ allows developers to rewrite critical sections in highly-parallelized SIMD assembly allowing higher performance and greater efficiency. This enables smooth playback of AV1 video in the browser with significantly less CPU utilization. In 2018, Matt Frost, head of strategy and partnerships for Chrome Media at Google had predicted that it would take another two years for AV1 to adopt wide scale. He had said, “Hardware support will likely come in 2020, as chip development typically takes two to three years”. However statistics prove that ‘dav1d’ can turn this prediction upside down. In the last few months, Firefox Beta has seen a remarkable growth in video playback after implementing AV1. Firefox Beta latest figures show 11.8% of playback proportion in April 2019, up from 3% in March and 0.85% in February. Looking at this growth, more websites are expected to take advantage of this next-generation video codec AV1. Image Source: Mozilla Hacks With its immense advantages, Mozilla has decided to invest in the future of AV1. Mozilla and Xiph.Org are jointly developing a clean-room encoder named rav1e (the Rust AV1 Encoder). This will help in increasing encoding gains, i.e., reducing the signal-to-noise ratio which in turn will allow software encoding fast enough for real-time applications like WebRTC. Rav1e will develop methods to make AV1 encoding tools 1000x faster by finding new algorithms, rather than simply optimizing existing code. https://twitter.com/waxzce/status/1132924406278307840 A user on Hacker News comments, “AV1's been making good progress in Firefox. A 1080p60 video has gone from being essentially unplayable in AV1 to now being almost perfect on my 5-year old, AVX2 enabled laptop in Firefox 68 beta” Visit the Mozilla Blog to know more about dav1d and rav1e. Firefox 67 will come with faster and reliable JavaScript debugging tools Firefox releases v66.0.4 and 60.6.2 to fix the expired certificate problem that ended up disabling add-ons Mozilla developers have built BugBug which uses machine learning to triage Firefox bugs

After the recent release of Node 10.0.0, npm have released version 6 in collaboration with node.js. npm v6 is a major update of the popular package manager for the JavaScript runtime environment Node.js. Typically, npm release their newer versions every year around spring time and following this pattern npm v6 was introduced as on April 26, 2018. This update introduces powerful security features for every developer who works with open source code. Built in security features npm v6 is the result of the collaboration between npm and their acquisition of the Node Security Platform. This introduces two new security features: npm registry Every user of the npm v6 Registry will begin receiving automatic warnings if the code used has a known security issue. npm will automatically review install requests against the NSP database and return a warning if the code contains a vulnerability. npm audit npm v6, has a new command, ‘npm audit’, which allows developers to recursively analyze their dependency trees to identify specific insecurities, following which developers can swap in a new version or find a safer alternate dependency. Both these security features are available free of charge to every npm user, with no purchase or registration required. These resources are open sourced to maximize the community benefit. By alerting the entire community to security vulnerabilities within a tool, npm can make JavaScript development safer for everyone. Additional Features Apart from the security features, there are also a large number of other performance updates: npm v6 is up to 17x faster than the npm of one year ago. npm ci is optimized to use npm within the continuous integration/continuous deployment (CI/CD) workflow almost 2x–3x faster. Webhooks are now configurable directly within the npm CLI. Easy verification of package with respect to tampering and corruption, with more visibly integrated metadata. Teams can now more easily share reproducible builds with automatic resolution of lockfile conflicts. Also checkout the release notes for npm v6 release, and the roadmap of the year ahead. Node 10.0.0 released, packed with exciting new features How is Node.js Changing Web Development? How to deploy a Node.js application to the web using Heroku

Oracle announced the much awaited Oracle Apex 18.1 today. Oracle Application Express is a free development tool by Oracle. It allows developers to create web-based applications quickly by using a web browser on an Oracle database. With Oracle Apex 18.1, Oracle provides easy integration of data from the REST services with data taken from the SQL queries within an Oracle database to build scalable applications. The new release also includes high-quality features for creating applications without the need of coding. Let’s have a look at some of the major features and improvements in Oracle Apex 18.1. Key features and updates Application features High-level application features such as access control, email reporting, feedback, activity reporting, dynamic user interface selection, etc, can be added to your app. An application can also be created with “cards” report interface, a timeline report as well as a dashboard. REST enabled SQL support Apex 18.1 allows you to build charts, calendars, reports, and trees. You can also invoke certain processes against Oracle REST Data Services (ORDS) -provided REST Enabled SQL Services. There is no need for a database link to include data from other remote database objects within your APEX application. REST Enabled SQL gets it all done for you. Web Source Modules Different REST endpoints can be used to declaratively access data such as ordinary REST data feeds, REST services from Oracle REST data services as well as Oracle Cloud Applications REST services. It provides the ability to influence REST data sources results using industry standard SQL. REST Workshop Updates have been made to the REST workshop. Apart from helping with creating REST services against Oracle database objects, the new REST workshop comes with an added ability to generate Swagger documentation against REST definitions with just a button click. Application Builder Improvements Oracle Apex 18.1 allows developers to create components quickly as wizards are now streamlined with fewer steps and smarter defaults. Usability enhancements have been made to Page Designer. This includes advanced color palette and graphics on page elements as well as to Sticky Filter which improves developers’ productivity. Social Authentication Oracle APEX 18.1 comes with a native authentication scheme and social sign-in. It is possible for developers to create applications in APEX using authentication methods such as Oracle Identity Cloud Service, Facebook, Google, generic OAuth2  and generic OpenID Connect without coding. Charts Oracle JET 4.2 engine is a new feature to the APEX 18.1. It consists of updated charts as well as APIs. It also comes with different types of charts such as Box-Plot, Gantt, and Pyramid. These provide support for multi-series sparse data sets. Mobile UI New component types namely ListView, Reflow Report and Column Toggle have been introduced which can be used for creating Mobile Applications. Improvements have been made to the APEX Universal Theme. These are mobile-focused enhancements which means that page headers and footers in mobiles will be displayed consistently on mobile devices. Also, floating item label templates help in optimizing the presented information on a mobile screen. There is also declarative support offered by Oracle APEX 18.1 for touch-based dynamic actions such as tap, swipe, double tap, press, and pan. Font APEX The new release includes a set of 32 x 32 high-resolution icons that automatically selects the right font size. Accessibility Accessibility mode is deprecated as the latest release will make use of APEX Advisor which consists of a bunch of tests to identify the most occurring accessibility issues. These are the major updates and improvements made in the latest Oracle APEX 18.1. Existing Oracle APEX 18.1 customers just need to install APEX 18.1 version to avail all the latest upgrades. To know more about Oracle APEX 18.1, be sure to check out the official Oracle Apex Blog. Xamarin Forms 3, the popular cross-platform UI Toolkit, is here! Firefox 60 arrives with exciting updates for web developers: Quantum CSS engine, new Web APIs and more Will Oracle become a key cloud player, and what will it mean to development & architecture community?