Another big day at the front end of the year, D2. Thank you for all the hard work and preparation of the participants and organizers. We also received a lot of beautiful stickers, HHH, showing the id card and the back of the computer

Next is the specific content of the meeting, the content is more, if there are omissions, please criticize you ~

All PPT of the conference has been officially put on GitHub, you can use ~ github.com/d2forum/14t…

Address the center of the circle

Front-end in recent years, is full of changes and remodeling, from the application of the upper layer to the bottom of the language framework, the requirements of the front-end are also changing, always has great challenges and opportunities.

Five challenges (I covered five challenges last year, but they are different)

  1. From the PC era to the wireless era, and then to the future IOT era, there are many excellent technologies in rendering, RN, Weex, Flutter, small program system, etc. Based on the underlying rendering ideas, Native rendering, 2D and 3D performance system, including WASM integration into wireless rendering, all bring many possibilities.
  2. 2B Deep precipitation in the vertical field of background scene. From 2C scenario to 2B scenario, the middle and background system previously supported by a large number of outsourcing full stack is also becoming the main battlefield of professional front-end. In the middle and background field, there are various challenges such as framework, layout, components, data exchange, operation of a huge system (cross-team collaboration), as well as technical visualization, Web Excel, editor, construction, intelligence and other directions worth in-depth study. How to get through with the back-end system in different domains and how to run through the domain model need to be explored and settled.
  3. From the traditional development mode to the cloud + end development mode, cloud makes the business system platform, interface, efficiency and business side. The front end focuses on the page to the business. Serverless must be the future trend, and front-end capabilities must match future technology requirements.
  4. Front-end intelligence, page composition, structure, standardization. Imgcook has done a good job of creating smart code for this year’s Double 11
  5. The depth of language. Domestic language and international standards, need to start from the bottom, participate in the formulation of standardization, promote the development of JS language. Recently he Lao also joined TC39 (last year has been teasing the class field can face to face with TC39 members of 😂), I hope that in the future in the standardization of the formulation, can see more and more people’s voice and film.

Morning – Language framework special session

Let’s work together on the future of JavaScript through TC39

Lecturer: Daniel Ehrenberg

Finally met the TC39 member who always felt very mysterious. Daniel is lovely, sharing wonderful and smooth, often quoting the Analects of Confucius to summarize, it seems that he has some understanding of Chinese culture ~

Daniel explained the working mechanism of TC39. A new feature needs to go through the following stages from being proposed to becoming a standard, which is very rigorous in general

  • Stage 0: Strawman-brain blast Stage, any ideas can be put forward ~
  • Stage 1: proposal – Discussion Stage, in which TC39 members initiate a formal proposal for a new feature and discuss it with other members and the community
  • Stage 2: Draft-draft phase, which requires two experimental concrete implementations
  • Stage 3: candidate – A Stage that is basically ready for implementation and needs to include two concrete implementations that conform to the specification
  • Stage 4: FINISHED – Released to the annual specification with acceptance of Test262, a test repository for new features

It then introduces several features that are currently in various stages, including Stage4’s that should appear soon in the ECMAScript 2020 specification, For example, BigInt, Dynamic import, and Optional Chaining (TS 3.7 already supports ~), others will not be discussed in detail, you can see the progress of TC39 work here, you can also issue opinions and communicate with them ~

Github.com/tc39/ecma26…

JS language execution process at engine level

Lecturer: Zhou Aimin

Zhou Aimin has profound skills and is very familiar with the underlying implementation process of JS, and has not heard this kind of sharing without product introduction, pure discussion of technology ~ return to the language itself, feeling very cordial. (although the product introduction to share is very fruitful, but this type of sharing is very difficult to have time to explain the specific implementation details, can be to send a architecture diagram, behind their research, the pure technical sharing, can focus on a particular piece of detail is very deep, after hearing immediately learn some may not know the content of the before, or technically very fruitful ~)

Overall content is very wide, including scope, environment, some basic concepts of the execution context, and lexical environment specification, property description specification, standards such as attribute identifier specification in detail, work at ordinary times scenario is very difficult to have the opportunity to further understand the content, so still have a lot of harvest, PPT should let out soon, I won’t expand it all ~ tell you the most impressive place

This code is the teacher PPT, face to face questions should be able to test the vast majority of people ~

const obj = {
  foo() {
  	return this;
	}
}

(obj.foo)() === obj // true
eval('obj.foo')() === obj // false
Copy the code

Why do obj.foo and eval(‘obj.foo’) both return a function, but execute it differently?

This is what the JS engine does. There are two types of execution: statement execution and expression execution, as shown in the following figure

  • Statement execution, that iseval('obj.foo')For this type, if the result contains a reference, it will be removed by GetValue, so no reference will be seen in the return value
  • Expression execution, i.eobj.fooIn this way, the return result can normally contain references

So eval(‘obj.foo’) returns a missing reference to obj, and this can only refer to the global scope

The same is true for nested levels, where references are removed

This detail is still very interesting, although not specialized in this direction, the usual work may not help, but as a front-end, if you can master JS in the engine layer execution details, or very exercise internal work ~

Fibjs module reconstruction – from callback to coroutine

Lecturer: Chen Lei

Fibjs, like Node, is also a set of JavaSscript runtime, and V8 engine is used at the bottom. The difference is that it uses logical lock to replace callback to control asynchronous. This idea is very novel

According to the performance comparison posted by the lecturer, FIBJS ORM module was reconstructed with this method, and its performance was greatly improved

However, its design cannot be ecologically compatible with the existing Node, and it still lacks some motivation for external users to land. I have seen teacher Xiangma’s answer on Zhihu, and many contents have been mentioned in this share. If you want to know more about FIBJS, you can refer to ~

www.zhihu.com/question/26…

Afternoon – Engineering special

Next stop for front-end engineering: IDE

Lecturer: Uphill, head up

IDE is one of the important directions set by the Front end Committee of Alibaba this year. After more than half a year’s construction, a lot of progress has been made. The technical implementation of the entire IDE kernel is extremely complex, as shown in the architecture diagram below. Each piece can be done for a long time.

So one hour of sharing, in technical implementation is the point, if you are interested in the technical details of the overall IDE, you can wait for the lecturer’s PPT after the conference, there are several good articles can refer to ~

  • A look at large IDE technology architectures from VSCode
  • Take you to develop and adjust VSCode source code
  • Decrypt VSCode breakpoint debugging principle

I would like to talk about my personal views on Web IDES. When I first initiated IDE co-development, I thought that I would directly build an online IDE to replace the existing development environment, and then all development projects would use this. My personal opinion is still not in favor of this approach, mainly for the following two reasons

  • The implementation is technically very difficult. The bottom layer is secondary encapsulation based on some open source projects (Monaco Editor, xterm.js, etc.), but there are still a lot of pits to step in, which requires a lot of time and energy
  • Does not effectively solve pain points, or even increase them: Cloud IDE is primarily about remote coding, building, and deployment, eliminating the complexity of the configuration environment. However, in terms of integrated development experience, no one thinks that using Cloud IDE is better than local development experience when developing large projects. Not only is it heavily dependent on network, but performance is also a big problem.

Later, it was found that the kernel jointly built is the IDE, namely KAITIAN Framework (the name is really cool ~), and then each business based on this kernel to encapsulate their own editor or even the whole IDE, such as Alipay small program IDE, Taobao developer tools, imgCook online editor, Ali Cloud’s function computing editor, etc., takes out the underlying editing preview debugging ability and so on for unified maintenance. Businesses customize proprietary logic on it, which is still very valuable for specific business scenarios.

In a word, as a technician, it must be a sense of accomplishment to participate in such a complex and challenging project and finally realize it. I hope I can have the opportunity to participate in such construction in the future

Babel: Under the Hood

Lecturer: Nicolo Ribaudo

This little brother is still a student, young and promising, speak very good ~

Babel transformed core link: raw code – raw AST- transformed AST- transformed code

The main functions are realized by the following packages: @babel/ Parser Parses source code to generate an AST, which goes through the following three steps

  • Lexical analysis: instantiating code to token and checking token validity, for example, comments that are not written with // or /**/ will generate errors
  • Syntax analysis: token to AST, and perform basic Syntax verification, such as semicolon problem, etc
  • Semantic analysis: Contextual analysis is performed, if any

@babel/traverse traverse the AST in depth-first mode, modifying and transiting @babel/ Generator generates new code based on the AST. @babel/core Babel core libraries are relied upon by many Babel facilities. Used to load preset and Plugin

@babel/template Takes the form of template to simplify the process of modifying the AST. @babel/types contains all types used in the AST

Then a simple implementation of babel-Plugin is explained, which is transformed as follows

/ / before transformation
const x = throw new Error("Err!") 
/ / after the transformation
const x = (() = > {throw new Error("Err!"); }) ();Copy the code

Plug-in writing is also very simple, directly paste code ~

export default function Plugin() {
  return {
    // Plug-in name
    name: 'throw-expressions'.// Plug-in options
    manipulateOptions(opts) {
      opts.parserOpts.plugins.push('throwExpressions')},// A method to traverse the AST and operate on it
    visitor: {
      UnaryExpression(path) {
        const {node} = path;
        // expressions that do not throw exceptions are not processed
        if(node.operator ! = ='throw') return;
        // Generate new AST structures based on templates
        const iife = template.expression.ast(`(() => {throw ${node.argument}`}) ());
        // Replace the original ASTpath.replaceWith(iife); }}}}Copy the code

Finally, I recommend an online code generation AST website, which is very useful when learning AST: astexplorer.net/

Browser-based real-time build exploration path

Lecturer: Xuan Ji (Xuan character generation, sounds like the name of the master ~)

After reading these two articles, Xuan Ji was touched and began to explore the road of browser construction ~

  • Formidable.com/blog/2019/n…
  • Dev. To/pika/a – futu…

Now some project dependency package is too big, especially some background projects, projects just put up, haven’t written the page, the first next few hundred MB dependency, think of this widely circulated graph

Therefore, the concept of browser side construction is very new, but it does have scenes and appeals. Teacher Xuan Ji summarized the core of real-time browser construction and implementation as follows and explained respectively ~

  • Design the loader for resource files
  • Design the compilation system of resource files
  • Design the browser-side file system – with BrowserFS
  • Design browser-side package management: namely browser-side NPM, realizing dynamic delivery, relying on caching, data structure and browser file system bridge, etc

Gravity is a browser-built event stream that can run through the browser to build a React project Demo. It’s a cool thing to do, and should save a lot of server resources if it can be used in a production environment.

However, I think it is a big problem to be incompatible with the existing Webpack toolchain, such as CSS-Loader and TS-Loader, which are very common, so I have to rebuild my own toolchain ecology. When asked at the scene, Hyun ji answered that since the design of event flow mechanism is the same, these loaders will also be easy to migrate.

Teacher Xuan Ji’s blog also has many other high-quality content, you can pay attention to a wave of github.com/pigcan/blog

Distributed Front-End Architecture

The instructor Ahmad Amireh

The quality of this performance is relatively general, the lecturer is a little nervous when speaking, maybe not particularly fully prepared, the atmosphere of the scene is a little awkward ~ and the content is actually talking about the micro front end, maybe put in the micro front end special performance will be more appropriate. I didn’t take too many notes on the whole process, so I won’t go into details.

But the lecturer itself is still very talented, wrote a happyPack project, used to optimize the speed of webpack construction, star number is also a lot, interested can refer to a wave ~ github.com/amireh/happ…

Evening part

Just like last year, this year’s D2 will also have a night session, which is very exciting

From left to right

  • Hax Mr He
  • Xicihu founder, FIBJS author Xiangma teacher
  • Ant experience technology department big boss Yu Bo big guy
  • TC39 core member Daniel Ehrenberg
  • And cute little sister translator

Before the round table, there are three wonderful Lightning Talks, which are in order

  • Mass node tree high performance rendering, using a variety of SAO operation under the mass data node tree rendering performance improved 18 times, this scheme is expected to open source in February next year, can expect a wave ~
  • Ling Zheng of Alibaba marketing Research and Experience Center shares the power of front-end engineering for marketing business. Including creative generation, picture real-time rendering, font rendering, video creative generation and editing, etc. Recently, I have been involved in marketing related work, and I know that each module is very challenging for front-end technology. It is not easy to achieve and successfully land in the business and bring effect to the business
  • Ali Nanjing R & D center henrui big guy share black technology recording screen technology XReplay, can 7*24 uninterrupted recording screen, high definition, and the size of only MP4 files 1/200, saving a lot of server storage resources. The specific technical implementation involves various algorithm patents. I have seen some relevant documents on the Intranet, which is not convenient for disclosure here. I will put them on the Intranet for ali’s friends’ reference.

Next, I will talk about the content of the roundtable ~ summarize the various thoughts and opinions of the leaders on the front end in the form of QA

Q: What makes a good front end? A: Pixel thinking (pursuit of extreme degree of reduction), full of curiosity, good cooperation with others. Good at reading, good at thinking, to achieve their own cognitive upgrade. Pay attention to the basic knowledge and the underlying implementation of API, do not be a simple API Caller~

Q: Do you have any changes in your cognition and thinking about the front end when you entered the industry and now? A: The front end is always closely related to human-computer interaction. With the improvement of terminal computing capability, the use scenarios of terminal devices are becoming more and more complex, and the front end has higher requirements for immediacy, fun and user experience.

Q: How have you changed personally since taking charge of the team? Yubo: I haven’t changed a lot since I started the team. I’ve learned a lot from the open source community. Open source is not a single person’s work. Large open source projects run by communities involve collaboration between multiple people. Therefore, the entity team is operated in the way of open source project. If team members have problems, they can communicate and solve them through the way of raising issues. At the same time, they attach great importance to internal communication and efficient coordination just like managing large open source projects.

Q: How do you maintain your love of technology? Yubo: The power of technology is one of the biggest driving forces for social innovation. I always feel the industry is very interesting, and every once in a while there will be a lot of unexpected surprises: I feel it is difficult to deal with people. Danel: Learning new things, coming up with solutions to problems, being curious about things.

Q: Key points of growth? Hax: Many years ago, I found that there was a JS behavior in Firefox that was not consistent with the standard, so I raised an issue to Firefox, and I was surprised to get a reply from the father of Javascript. Joining TC39 is also very important. From going to school, to joining Taobao and Alipay, to adhere to the era of all in Wireless, to finally achieve the breakthrough, there are a lot of heart process, I strongly recommend to read this article ~ detailed yu Bo’s growth road, I think it is worth every front students to read and learn. My way of growing up. – Yubo

About the content of the evening there is a net friend summed up a version made no difference, more detailed content, also highly recommend reading ~ www.yuque.com/zhaishenkin…

Finally, let’s take a group photo of the night show to end this time with laughter

conclusion

It has been 14 years since D2 was founded. Although D2 only attended two sessions in the past year and watched part of the previous years’ content on the Internet, it really felt the rapid development of the front end in the past few years, constantly breaking through itself, expanding boundaries and challenging unknown possibilities. D2 is also getting better and better, basically can be said to be the highest quality front-end conference in China (of course our Ant SEE Conf is also very good, but there are a lot of designer content, not pure front-end conference), although the ticket price is relatively expensive (this year is also higher than last year…). , but with respect to the quality, or easy value return ticket price ~ (so hard advertising, not fast to send me next year tickets!

“From last year to this year, my biggest change is that I ended my student days and officially became a front end engineer of Alibaba.” The excellent front end is either in Ali or on the way to Ali. “Although this sentence is intended to make fun of, at present Ali is obviously superior to other companies in leading and breakthrough in front end technology. Every year D2 can come up with a variety of fresh things, and not empty wheels, many products have been through tens of millions or even hundreds of millions of levels of UV test, is really able to empower the business, to bring significant value.

Personally, seeing these new things, from last year’s Shouting oh my God, to this year’s relatively calm, take out more time and energy to listen to the external sharing, mainly part of the content has been internal propaganda for a long time, there have been relevant input 😂 such as today’s micro front-end, IDE kernel KAITIAN, XReplay and other issues, in the internal, The developers of these projects have written a lot of documentation for reference, and you can even look directly at the source code for a glimpse of the internal details. As long as willing to pay time to research, the harvest is certainly far more than today’s meeting of the hour ~

Having said so much, the core point is: if you want to know in advance, even personally participate in and build so many awesome products, do not hurry to join us!

Below is the recruitment time ~

About us: We are ant Insurance experience technology team, from Ant Financial Insurance business group. We are a young team (no historical technology stack baggage), currently with an average age of 92 years (minus a maximum score of 8x years – team leader, minus a minimum score of 97 years 🙈). We support almost all of Ali Group’s insurance businesses. Last year, Mutual Treasure produced by us caused a sensation in the insurance industry and became the star product of Ant and even the whole Ali Group. This year, with the total number of mutual treasure users exceeding 100 million, the whole business of Ant Insurance continues to flourish. The team is rich in talents, including Tsinghua university, Zhejiang University, Harbin Institute of Technology, doctor and master. There is also community active member and senior, easyMock author Chuangker. Basically every week there are technical sharing, the technical atmosphere is excellent, technical exchanges, spare time life is also very rich, to wave team members handsome and beautiful photos ~






If you are interested in joining us, please contact us by email or send your resume to [email protected]