The best articles, links and news related to Frontend Development, and more, delivered once a week. All reference in this issue are gathered from Medium, Hacker News, Reddit,Twitter, MyBridge, etc.
More Issues can be found in Frontend+ Weekly Repository.
News
Apple Open Source SwiftNIO: At the recent try! Swift Conference in Tokyo, Apple announced the SwiftNIO project, a Netty-like non-blocking cross-platform I/O framework written in Swift. SwiftNIO aims to be an asynchronous event-driven network framework for the development of high-performance servers and clients. It is currently developed and tested on macOS (10.12+) and Linux (Ubuntu 14.04). According to Apple: SwiftNIO is a cross-platform asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients.
Node v8.10.0 (LTS) & v9.8.0 (Current): This release comes with a lot of big changes. There are updates to V8, libuv, and ICU, a bugfix in npm, and support for building with OpenSSL 1.1.0.
New in Chrome 65: The CSS Paint API allows you to programmatically generate an image. The Server Timing API allows web servers to provide performance timing information via HTTP headers. the new CSS display: contents property can make boxes disappear!
Tutorial
GraphQL: Everything You Need to Know: So you’ve been constructing and using REST API’s for quite some time now and short while ago started hearing about GraphQL — a new hype in the field of API technologies. The purpose of this article is to highlight the major features associated with GraphQL along with discussing the significant pros and cons associated with this particular API specification. More links about this can be found in Awesome Web Reference.
Learn Redux by Building Redux from Scratch: A tutorial to understand the core Redux library by building it step-by-step. More links about this can be found in Awesome Web Reference.
Algorithm Interview Questions in JavaScript: Glob Matching: Much to many people's chagrin, the practice of asking algorithms questions in tech interviews doesn't seem like it is going anywhere. From what I've heard though, more and more companies are allowing people to answer algorithms questions in JavaScript. In this week's article, I'll walk through a common interview question, glob matching), and implement the solution in JavaScript. More links about this can be found in Awesome Web Reference.
Engineering Practices
Structuring projects and naming components in React: As React is just a lib, it doesn’t dictate rules about how you should organize and structure your projects. This is nice, because it gives us freedom to try different approaches and adapt the ones that better fit for us. On the other hand, this could cause some confusion for devs that are starting in React world. In this post, I’m going to show some approaches that I have been using for a while and have been scaling very well. These approaches doesn’t re-create the wheel, they just put together and refine what we have on the market. More links about this can be found in Awesome Web Reference.
Let’s Build a Custom Vue Router: vue-router does a fantastic job by providing us with the items needed to map an application’s components to different browser URL routes. But, simple applications often don’t need a fully fledged routing library like vue-router. In this article, we'll build a simple custom client-side router with Vue. By doing so, we’ll gather an understanding of what needs to be handled to construct client-side routing as well as where potential shortcomings can exist. More links about this can be found in Awesome Web Reference.
The hidden components of Web Caching: Caching allows you to increase application processing speed. Storing a copy of the previously fetched data or computed results increases processing speed. This enables future requests to be served faster. It is an effective architectural pattern, because most programs access the same data or instructions over and over. It is applied to everything from web-browsers to web-servers and hard-disks to CPUs. Let’s take a bottom-up approach to understanding the various layers of caching. We will focus on where data can be cached instead of how to cache it. More links about this can be found in Awesome Web Reference.
Under the hood
Turning your web traffic into a Super Computer: The subject matter of this post is controversial as it discusses extracting computing resources from the visitors of a website. There are a lot of discussions at the moment centered around web-browser based crypto currency mining. Most paint a deplorable picture of the practice; please keep in mind that there are very desirable paths alongside which these practices can develop. I am not elaborating on these arguments here, I am only describing a method to harness the resources. More links about this can be found in Awesome Web Reference.
Beyond React 16: Time Slicing and Suspense API: ReactJS is a UI library that's a very powerful tool amongst frontend developers in building JavaScript applications. In this article, I'll introduce you to a few features coming to ReactJS. Time-slicing allows ReactJS, which now runs on React Fiber, to split computations of updates on children components into chunks during idle callbacks and rendering work is spread out over multiple frames. The simple definition of the suspense feature is that ReactJS can pause any state update until the data been fetched is ready to be rendered. More links about this can be found in Awesome Web Reference.
8 React conditional rendering methods: JSX is a powerful extension to JavaScript that allows us to define UI components. But it doesn’t support loops or conditional expressions directly. There’s more than one way to use conditional expressions in React. And, as with most things in programming, some are better suited than others depending on the problem you’re trying to solve. This tutorial covers the most popular conditional renderings methods: If/Else, Prevent rendering with null, Element variables, Ternary operator, Short-circuit operator (&& ), Immediately-Invoked Function Expressions (IIFE), Subcomponents, High Order Components (HOCs). More links about this can be found in Awesome Web Reference.
OpenSource
Propel: Propel provides a GPU-backed numpy-like infrastructure for scientific computing in JavaScript. JavaScript is a fast, dynamic language which, we think, could act as an ideal workflow for scientific programmers of all sorts. Propel runs both in the browser and natively from Node. In both environments Propel is able to use GPU hardware for computations. In the browser it utilizes WebGL through deeplearn.js and on Node it uses TensorFlow's C API.
scrcpy: This application provides display and control of Android devices connected on USB. It does not require any root access. It works on GNU/Linux, Windows and Mac OS.
Xray: Xray is an experimental Electron-based text editor informed by what we've learned in the four years since the launch of Atom. In the short term, this project is a testbed for rapidly iterating on several radical ideas without risking the stability of Atom. The longer term future of the code in this repository will become clearer after a few months of progress. For now, our primary goal is to iterate rapidly and learn as much as possible.
Top comments (0)