Frontend+ Weekly No.1: The State of JavaScript Frameworks, Web Developer Roadmap - 2018

#web #javascript #react

Frontend+ Weekly No.1: The State of JavaScript Frameworks, Web Developer Roadmap - 2018

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, and so on.

More Issues can be found in Frontend+ Weekly Repository.

News

The State of JavaScript Frameworks, 2017 by NPM: Npm guys use the number by looking at download counts for a package as a percentage of the download count for all packages in the registry at that time ("share of registry"), to mine whether a package is growing faster than the Registry (increasing in popularity) or slower than the registry (becoming less popular). This post focus on Front-End Frameworks, The React Ecosystem and Back-End Frameworks. For front-end frameworks, Preact and Vue is very fast growing, React is both huge and very fast-growing for its size. For react ecosystem, Apollo is growing extremely quickly and MobX has good growth but is yet to challenge Redux.
Nuxt.js 1.0 is out: Nuxt.js is a framework on top of Vue.js, vue-router, vuex and vue-meta. Nuxt 1.0.0 is out, up to date with the lastest versions of Vue, vue-router, vuex and vue-meta. Better stability, performances and ready for production. It also brings a few breaking changes (node >8 compatibility), new features and a lot of bug fixes.
Node v9.4.0 (Current) released: Notable changes include deprecate AsyncHooks Sensitive API and runInAsyncIdScope, remove reaches into _events internals, add rawPacket in err of clientError event, etc. You can turn to the original for more information
New Package Moniker rules: In order to reduce typosquatting of packages, the npm registry not does not allow any similar namings for your package anymore if there’s an existing package already. In effect, this is an active push and encouragement to make people use their user scope for publishing packages. For example, because react-native exists, no one can publish variations like reactnative, but can use a scope like @ceejbot/json-stream.

Tutorial

What’s New in HTML 5.2?: Less than a month ago, HTML 5.2 became an official W3C Recommendation (REC), this means that W3C officially recommends it’s deployment by user agents, and it’s implementation by web page authors. In this article, author will go over some of the changes, which will impact my development the most, such as native dialog element, Payment Request API from iFrames and some newly valid practices. More reference for HTML can be found Here.
Real Time Apps with TypeScript: Integrating Web Sockets, Node & Angular: In this article, the author will show you how to build a real time chat application using typeScript language only. This article will introduce webSocket, use express and typescript to implement chat server, use angular to build client application, etc. More reference for TypeScript can be found in Awesome Reference.
Node.js + face-recognition.js : Simple and Robust Face Recognition using Deep Learning: In this article I am going to show you how to perform robust face detection and face recognition using face-recognition.js. This npm package uses dlib under the hood and exposes Node.js bindings to face recognition tools from dlib, The dlib library uses deep learning methods and comes with some pretrained models, which have been shown to provide an astonishing prediction accuracy of 99.38% running the LFW face recognition benchmark. More reference for Node.js can be found in Awesome Reference.

Engineering Practices

Server Rendering, Code Splitting, and Lazy Loading with React Router v4: In this article, software engineers from Airbnb share practices in combing server rendering and code splitting, so as to match against your current route before rendering. More reference for React can be found in Awesome Reference.
8 Tips to Build Better Node.js Apps in 2018: In this article, guys from RisingStack collected a few tips that we think Node.js developers should follow in 2018. These are Use async - await, Get acquainted with import and import(), Get familiar with HTTP/2, Get rid of code style controversies, Secure your Node.js applications, and so on. More reference for Node.js can be found in Awesome Reference.
Web Developer Roadmap - 2018: In this repository, you find a set of charts demonstrating the paths that you can take and the technologies that you would want to adopt in order to become a frontend, backend or a devops. More reference for Web can be found in Awesome Reference.

Under the hood

Introduction to modern network load balancing and proxying: In this post the author attempt to rectify the lack of information by providing a gentle introduction to modern network load balancing and proxying. This post includes what is network load balancing and proxying, Load balancer vs. proxy, different load balancer topologies，etc. More reference for microservice can be found in Awesome Reference.
How Operating Systems Work: 10 Concepts you Should Know as a Developer: In this article, the author shares 10 critical operating system concepts that you need to learn if you want to get good at developing software. These are Processes and Process Management, Threads and Concurrency, Scheduling, Memory Management, Input/Output Management, Virtualization, Distributed File Systems, Distributed Shared Memory, Cloud Computing, and so on. More reference for Operating System can be found in Awesome Reference.
Frontend in 2018: More consensus, less complexity: Frameworks like React and Angular have continued to enjoy large-scale support among the community, but new contenders like Vue have also exploded in popularity. Webpack continues to be the build tool of choice and NPM the package system of choice. WebAssembly opened up the web to a multitude of new and exciting use cases with unprecedented speeds. Technologies like GraphQL have innovated the way that APIs are both written and used in web applications.

OpenSource

Docusaurus: Docusaurus is a project for easily building, deploying, and maintaining open source project websites. It claims to be Simple to Start, Localizable and Customizable.
toapi: Toapi is a clever, simple and fast flask library that enable any website to provide API services. Toapi turns these matters into a piece of cake. All you need to do is to define the data you want, and you've made it. The process is fully automated, and data can be accessed through API in seconds!
TOAST UI Editor:TOAST UI Editor is a Productive and Extensible Markdown WYSIWYG Editor, provides Markdown mode and Wysiwyg mode. TOAST UI Editor respects both CommonMark and GFM specifications, alse comes with powerful Extensions in compliance with the Markdown syntax, while also providing APIs so you can develop your own extensions.
Nerv: Nerv is a virtual-dom based JavaScript (TypeScript) library with identical React 16 API, which offers much higher performance, tinier package size and better browser compatibility.
workerize: workerize moves a module into a Web Worker, automatically reflecting exported functions as asynchronous proxies. It bundles a tiny, purpose-built RPC implementation into your app, supports synchronous and asynchronous worker functions and works beautifully with async/await
Screenshot-to-code-in-Keras: A neural network that transforms a screenshot into a static website. Within three years deep learning will change front-end development. It will increase prototyping speed and lower the barrier for building software. In the provided models, we’ll teach a neural network how to code a basic a HTML and CSS website based on a picture of a design mockup.