There are 2,015 words and it takes four minutes to read. The weekend is the family reunion after two months, and the preparation of each content requires an average of three hours of my concentration, so the content of issue 59 was only ready this morning, sorry for everyone. This week’s introduction to “Flow versus TypeScript” comes from a JS survey at the end of last year showing that 39% of programmers have heard of TypeScript and are ready to adopt it. Are you one of them? From want to really start to use lack is practice. I have only recently embraced TypeScript. Enjoy this week’s picks below.

The article tutorial

Required reading for architects: Architecture for Open Source software

English series “The Architecture of Open Source Applications”, this series of articles are strongly recommended for students who are interested in becoming architects to read. It introduces many design concepts of Open Source software. The whole set is divided into four volumes and is completely Open Source. There are also dark horse new, if you have not thought about how these commonplace things are designed, I believe that the following article will give you a lot of inspiration. The latest series is called 500 Lines or Less. What can you do with 500 Lines of code? It’s interesting.

Util. Promisify

Node.js 8 has added new features that allow you to easily convert various callback-based functions into promises that can be used in the async/await context. This article covers basic usage.

Compare Flow and TypeScript

Main title: The JS type system, the original author is also very hard, the JS type system comparison to do a lot of sharing, early compared Flow and TypeScript 1.x, later compared Flow and TypeScript 2.x, finally added ELM into the comparison. This is a link to the midarticle, which is more academic in style and is a must-read if you want to make a serious choice between Flow and TypeScript.

From the Flow to the TypeScript

In the early days of React development, the author used Facebook’s open source static checking solution, Flow, because TypeScript was not perfect. Over time, the author found that TypeScript was more suitable for the needs, despite the vs in the title. But there is a clear bias toward TypeScript, and the basic steps from Flow to TypeScript are given. TypeScript is a technology that 39% of developers in the 2016 JS survey have heard of and tried out.

React Native progressive image loading idea

Many things in the field of WEB and APP are common, and optimization of image loading is essential for multi-image applications. This article introduces a solution to implement progressive image loading in React Native, and provides a practical code example.

The development tools

Lighthouse: The power of Dev Tools

Chrome Dev Tools has been built into Chrome Dev Tools to provide a comprehensive diagnosis of your web pages, especially H5, with reports covering PWA, performance, accessibility, best practices, and more. There’s a lot to learn from just one report. And Lighthouse also provides command-line tools that can be easily integrated into your CI process.

ZangoDB: MongoDB in the browser

ZangoDB is a MongoDB like database wrapper based on HTML5’s IndexedDB. If you are familiar with the syntax of MongoDB, It’s easy to write MongoDB code in a browser to do data filtering, paging, projection, sorting, updating, and aggregation.

The code framework

FastImage: High performance React Native graphics component

This week, we optimized image loading for our company APP. While researching, we found CachedImage and FastImage, where FastImage is updated, but allows developers more autonomy in image loading scheduling, both of which support Placeholder, file system caching. You can choose according to your own needs.

FeatherIcon: Beautiful open source icon library

There are more and more icon libraries available in the community, what do you consider when choosing? Is it open source, type of icon, copyright, popularity, difficulty in adding new ICONS? Feather Icon uses MIT authorization, the main maintainer is also diligent, many users, the design style is relatively simple, you can also have a look.

Look for inspiration

Learn to do everything

Can you teach someone how to use chopsticks? Seemingly simple things, it seems to find his key, and explain to others is not so easy. Wiki-how has a variety of tutorials on how to do XXX. When you are learning something new, can you refer to them when writing a new tutorial?

The best site programmers should visit

Someone has already posted a list of all kinds of online resources that programmers can use to prepare for an interview, where to read the news, where to find great videos, Youtube channels, free programming books, etc. If you want to practice improving your English, Each of these links is available to you.

Animation gradient function illustration

Just the right kind of animation can make your app feel much smoother. To ease your app, it’s important to mention the easing functions, which basically control how the animation looks. What are the curves of each of the different easing functions? Here is a graphic illustration to give you a vivid explanation.

Video tutorial

Learn about higher-order and functional components in Recompose

Egghead. IO. If you’ve been using React for a long time, say a year, but don’t know what functional components or higher-order components are, this is a knock-on-the-blackboard tutorial. While React Best Practice and Design Patterns is text, this one is video, and is based on Recompose, many Patterns can be implemented without it.

Egghead. IO: 60 minutes to learn ES6

Egghead. IO is one of the first video courses on egghead. IO to demonstrate the new features of ES6 through actual coding.

Good question and answer

How to manage large files with Git?

How to use Git to manage large files such as PSD, binaries, database files, etc. Git has a natural advantage in keeping track of this kind of record.

How to format currency numbers with JS?

Many students may think to find a library, if your requirements are very simple, why not try to write your own? This is a canonical solution, note that the answer is discussed a lot, and use it with caution (it’s always good to read the documentation carefully).

One More Thing

The author of this article is Wang Shijun. For commercial reprint, please contact the author for authorization. For non-commercial reprint, please indicate the source. If you found this article helpful, please give it a thumbs up! If you have any questions about the content of this article, please leave a comment. Want to know what I’ll write next? Please subscribe to my nuggets column or Zhihu column: Front End Weekly: Keeping you Up to date on the Front End.

Happy Hacking