A restless and challenging journey

I am Li Yan, from Chengdu Mangeke Technology Co., LTD. I graduated from Peking University in 2010 with a bachelor’s degree in Information Management and a bachelor’s degree in computer Software. After graduation, I was engaged in Web development in kuwo Music Business Team, mainly responsible for the company’s advertising system, VIP membership rating system, pop-ups in music boxes and other businesses.

After two years, I decided that front-end development was technically easy, and browser compatibility issues were huge. Most of the time I was obsessed with some inexplicable bugs, and it wasn’t worth it to continue working on the back-end. Then, I switched to Renren Games and joined the Project team of Marshal Iron and Steel to do back-end development of the game, mainly using network protocol, server caching, concurrency, database optimization and other technologies. The weather in Beijing was very bad and I suffered from rhinitis all the year round, so A year later I chose to go back to Chengdu. At that time, I felt that the Internet environment in Chengdu was not good, so I went to Tencent in Shenzhen in 2014 to work in the MIG Wireless Cooperative development department and do the development work related to App Treasure, and gained an in-depth understanding of dachang’s product design, requirement review, development, test, deployment and launch, as well as the whole RESEARCH and development process and agile development.

In 2015, a friend of chengdu start-up company contacted me, hoping that I could lead a big front-end technology team, so I returned to Chengdu. In the company, I mainly promoted the separation of the front and back ends of the company, and gradually unified the development of Web front-end, Android, iOS and wechat platform with React, Redux, React Native and other technical architectures. One year later, the original CTO of the company resigned and the work was handed over to me. I continued to lead the back-end team to do micro-service, promote CI/CD related work and transfer the service to Ali Cloud.

At the end of May 2017, I left my job to start my own business and set up Mangeek Technology Co., LTD. The company slogan is “optimize life with science and technology”, is committed to using technology to improve people’s work efficiency, improve people’s quality of life. The English name of the company is Magicfun. AI, which means fun and short for function in programming. We want our roles to be “magical and fun functions powered by AI technology and so on” that help users grow and evolve quickly. The company’s current business mainly includes online IT education, IT consulting, and enterprise customized development including Web, APP, wechat public account, small program, data analysis and visualization, etc. In addition, we are currently working on a project that combines deep reinforcement learning with games.

Multiple factors, open the road of big front end

When I just graduated, I don’t know what the front end is. Some senior students suggested to start from the front end, for a very real reason: all men do the back end, there are girls at the front end, and UI designers are mostly girls.

At the same time, there’s more to the front end than just using jQuery and writing a page and solving a bunch of crappy browser compatibility issues — which was the norm when I first started. Front-end technology is increasingly complex and has a high technical threshold. At the same time, the front end is more and more important, can do more and more things, such as wechat development, APP, Desktop, AR/VR and so on.

More importantly, I think the front end is closer to the product itself, and can directly communicate with users, product managers, UI designers, market, etc., which is conducive to their all-round development. Backend development will become more and more “cloud”, and my judgment is that there will be two main categories of backend programmers: those who build the cloud and those who use the cloud. Especially with the development of technologies like Serverless, dedicated back-end programmers may not even be required — or rely on very little — in small products.

“Big front end”, to what is big

When it comes to the front end, we generally refer to Web development. There are so many things that the Web can do.

WebRTC Voice and video calls

WebRTC is an open standard that allows you to do video chat or voice chat directly in your browser. Current browser support is also very good, including the latest iOS 11. Here is the browser support for WebRTC.

(Click to enlarge image)

Image from caniuse.com/#search=web…

 P2P CDN

WebRTC can do end to end communication, also can realize P2P technology. P2P CDN has been implemented based on this, which can save a lot of cost, such as Serverless CDN.

 AR/VR

The AR/VR effect can also be realized in the browser. WebGL supports 3D, and on this basis, there is a development library of AR.js, which can write 3D programs efficiently. As mentioned earlier, WebRTC can take the camera, and the camera can be combined with 3D to make AR and VR effects. IO is a dedicated AR/ VR framework developed by Firefox.

Here are some other AR/VR references:

  • Github.com/jeromeetien…
  • Webxr. IO/webar – playg…
  • webvr.info/

Big 3D games

One of the most important issues with browsers is performance. Web technology can now be used to create large 3D games in the browser. Here are some linked demos for you to check out.

  • www.awwwards.com/22-experime…

The main technology that it uses,

  • One is WebGL, which can quickly render 3D graphics through GPU acceleration.
  • The second is asm.js and WebAssembly. Through Emscripten compiler, ordinary C++ code is compiled into a subset of js asm.js, and the performance can reach 50% of the local speed of C++ native code. Later, several major companies, including Google, Mozilla, Apple, and Microsoft, came together to create WebAssembly standards that further improved performance and supported more browsers.

For more details on ASM.js and WebAssembly, see my recent blog, Magicly. me/ FE-HPC/ASMJ…

Webassembly’s browser support is also very high, new versions of Firefox, Chrome, iOS, Internet Explorer, Opera, and more are supported, as shown below.

(Click to enlarge image)

Machine learning

The front end can also do machine learning, and HERE I have two reference links for you. The first is A ConvNetJS developed by Li’s senior protege Andrej Karpathy. The second is Google’s recently opened source deeplearn.js library. Both libraries can train deep neural networks directly in the browser.

  • Cs.stanford.edu/people/karp…
  • deeplearnjs.org/

The Web technologies mentioned above all run in standard browsers, and there are many Web technologies that run in wrapped browser cores like Electron and Nw. js, such as the wechat development tool for the desktop, Slack for the desktop, Github for the desktop, etc. Others no longer run entirely in browsers, such as wechat Miniprograms, React Native, and Weex, which Alibaba opened last year.

Web technologies unify three-terminal development practices

My idea of a big front end should include the following:

  • Web/H5
  • APP (Android, iOS)
  • WeChat development
  • The Desktop client
  • Data visualization
  • The visual design
  • New human-computer interaction technologies, including speech recognition, computer vision, AR/VR, etc

The Web is now the most popular technology platform that truly runs across platforms: PC, Web, mobile, watch, TV, Kindle, refrigerator…

Any application that can be written in JavaScript, will eventually be written in JavaScript. — Atwood’s Law

Let’s take a look at how we can unify the three ends with Web technology.

 Web/H5

I started looking at HTML5 in 2011, and HTML5 is getting more powerful, new features are coming out all the time, Including native support for video, audio, WebRTC, WebGL, Push Notification, offline storage, Service worker, Webworkers, WebAssembly, PWA, Chrome, FF and other Addon technologies to enhance Web capabilities.

 Node.js

I think the Web boom came with the V8 engine, which greatly improved the efficiency of JS, and then node.js, which made JS not only write page animation, and then all kinds of building tools, scaffolding, development frameworks, etc. Such as the current Ng, React, Vue frameworks.

 APP

When RN came along, we followed it for a long time and thought it would work in production, so we let the iOS team try it out first. The problem at that time was that iOS developers felt that the performance of this technology was problematic, and it was completely different from normal development habits, including the pain of writing tags and JS at the beginning. Before, the interface was quickly generated by dragging and dropping directly in Xcode, and the efficiency of using CSS and JS was too low. After a month or so, people get used to it, it’s easy to use it, and dynamic updates make it easy to see the effects immediately after the change, so people accept it. Three months later, when we were done with iOS and we were done with it, we asked android students to use RN to refactor code. We ended up with android and iOS sharing roughly 50% of their code.

RN has several other options for developing apps using Web technologies, including PhoneGap/Cordova, Ionic, and Weex.

  • ionicframework.com/
  • Facebook. Making. IO/react – nativ…
  • weex-project.io/cn/guide/

WeChat development

Then came the wechat mini program. We were the first ones to get the wechat mini program experience code, and when we looked at it, we found it was very similar to RN’s idea. We built a layer of encapsulation on top of the native applet interface, which is more similar to React, and then migrated the previous HTML5 page to wechat applet at a very low cost.

PC

I have never done PC before. Recently, I happened to have a project to do PC software, and my first thought was to use Web technology to do it. I did some research and learned that one is Nw.js and the other is Electron. After analyzing Electron, I found it relatively new, and there have been several successful projects based on it, such as the Atom editor, Microsoft’s VSCode, Slack desktop, GitHub desktop, and more.

So we chose Electron.

Data visualization

Back-end management system, including statistical reports, index curves and so on, we use Baidu open source visualization framework Echarts.

We also used D3, which is a more flexible and powerful open source framework for data visualization.

 AR/VR

VR was very popular last year. We did 360-degree videos and things like that, mostly using WebGL. WebGL is quite complex, and we built it based on the library three.js that someone else packaged. In a word, it’s nice and powerful.

What I have mentioned above basically covers the things I have developed with Web technology, including HTML5, APP, wechat development, PC development, data visualization, AR/VR, etc.

Js performance issues

Many people are skeptical about the performance of JS, such as its single-threaded nature and its dynamic language. How to solve these problems?

First, JS performance is already pretty good, and in most cases there are no bottlenecks for simple Web development.

On the other hand, such as webWokers concurrency technology, WebAssembly to compile native code into JS execution technology and use WebGL to do GPU acceleration technology, has basically solved the PERFORMANCE problem of JS.

Deployment architecture

Finally, a word about our deployment architecture.

If it is a single page like SPA, it is basically deploy index. HTML to Nginx, and other packages to deploy to CDN, including JSS, CSS, images, fonts, etc. WebPack automatically hashes the contents of the file, and then sets the max-age of cache-Control to a large size to take full advantage of the browser and HTTP caches and to ensure timely updates.

Why is index. HTML not in CDN? Because if the CDN cache is not cleared properly, the entry file is not updated and all resources are not updated, which is a serious problem.

If the above method is considered to be relatively long, we will choose nginx back-end deployment Node.js to do server rendering to solve the problem of long white screen time on the home page. Alternatively, static generation tools such as Gatsby and next. Js can be used to generate static pages in advance and dynamically load other pages after the loading of the home page is completed.

Recently I have seen several projects that deploy all projects to CDN. They have proposed an architecture called JamStack for those who are interested.

And then finally the front and rear end separation. The front end is only responsible for the realization of the page and the front end effect. The API interface is developed before development. We use RAP to manage the interface, and the front end uses JSONServer to simulate data. In this case, there will be cross-domain problems, which we will solve with CORS. The browser compatibility of CORS is also doing well.