Project engineering
Development direction
Professional environment
Summary of the framework/skills to be mastered
The front-end in 2017 is not so much more cruel as it is more standardized. In the past two years, novices who went through various trainings for a few months and casually offered tens of thousands or tens of thousands will be eliminated by the market. .
Front-end development tools/compilation tools are gradually taking shape. Although they are not as complete as IDE environments for top-ranked programming languages such as object-c, java, and C+, they are. The concept of engineering modularity has begun to take root in people's hearts. Those who write original HTML CSS Javascript code these days are either small projects or novices.
Front-end work is more challenging and the direction is more diverse
The web front-end is emphasized here because many iOS and Android developments now include the title of big front-end. Mainly because of the emergence of React isomorphism, many of them started to be mixed together.
First of all, let’s review the front-end in the impression of our old classmates:
老 antique: PS cut image export
Newbie: Adobe Dreamweaver writing code
lazy: UltraEdit, notepad++ …
Maybe after you become proficient, you can just find something that can type and start writing. code, but I met an old front-end veteran with many years of experience. He wrote a piece of code by hand without checking it because he was too lazy to open the editor, and submitted it directly. Then he accidentally typed the wrong character, which almost ended the entire project. matter. Really powerful people should be very cautious at all times. Please make good use of the IDE's error checking and correction functions.
Different from the past, if you want to start web front-end development this year (hereinafter referred to as front-end), then at least you don’t have to worry about too many browser compatibility, but it doesn’t mean that you don’t need to care at all, just The development environment is not as troublesome as before because of the emergence of various compilers.
Lagging browser version iterations.
I got a mobile phone from one of the top 500 domestic mobile phone companies. When I saw that it came with the webkit kernel, it turned out to be the 2003 Releases version of webkit. I was quite shocked at the time. After all, the Android kernel is also 4.x. I still don’t know I know how they managed to put such an old browser kernel into a relatively new Android system, and I don’t know what it means. Of course, even with Qualcomm SOC baseband, it is very difficult to upgrade the system. , not to mention other soc basebands.
The Android version of WeChat was roughly Chrome 35 before the deadline (the latest is Chrome 55), and it has remained unchanged for one year, which is said to be for stability.
UC, Baidu, and other shell browsers are very popular, but they only call the browser kernel of the system. Don’t tell me that they have optimized the loading speed. The loading speed is determined by the network status and system hardware. , does it have anything to do with your shell browser? So I don’t know what is written in their dozens of megabytes of capacity, and it’s scary to think about it.
In short, in the desktop era, we are faced with the cancer of IE6, 7, and 8. In the mobile era, we are faced with the cancer of Android (domestic only)
##ATOM The most popular editor at present
Sublime text Although the conscience editor is paid, it is not mandatory. It is just an occasional reminder.
vscode The basic plug-in is complete but the update of third-party plug-ins is slow
Please don’t Double-click the HTML to preview the code you wrote like before. There is a question I have answered hundreds of times for newbies in some groups: XXXXX is not allowed by Access-Control-Allow-Origin, basically 99% of it is caused by double-clicking HTML directly (the remaining 1% is caused by http cross-domain and so on)
Since You have to establish localhost, so deploying IIS, os server, etc. is very troublesome, at least I think it is. And it also involves some paid software and the like, and the cost has increased a lot.Thanks to the development of nodejs, now Browsersync and webpack dev server can quickly deploy a project directory, provided that you have node installed.
Although this subtitle is a bit exaggerated, it is a trend.
The browser runs the Iron Triangle: css html js. If the existing browsers remain unchanged, these necessary files will be less and less likely to be written directly by engineers in the future. Instead, they will choose a compilation tool. Write it in your favorite emerging language, and then compile it into a file that the browser can recognize. Of course, it is not ruled out that the browser can directly run less, scss, ts and other files in the future. This is possible. . The most famous example is that jQuery's syntax has been absorbed by ES2015 and even new-age browsers and has built-in native support (it was even reported that browsers would have built-in jQuery in the past)
CSS:
For example:
In the less file we write this:
.foo {
display: flex;
justify-content: center;
flex-direction: column;
.bar {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
&:hover {
color:red;
}
}
}The compiled css is like this:
.foo {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.foo .bar {
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-moz-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-flex-basis: auto;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
.foo .bar:hover {
color: red;
}The above is an example using css,
There are also pug (formerly called jade) for HTML, HAML
typescript for JS, coffeeScript
But here I want to talk about js in particular, The new versions of ES6 and ES7 are actually very perfect. They have all the syntax modularization and so on. Then they can be compiled into a version compatible with popular browsers through the famous Babel compiler. Although I think typescript is quite good. , but I personally feel that there is no need to increase the cost of team learning unless it is your personal hobby.
With the development of the front-end and the maturity of nodejs, It is imperative to separate the front-end and back-end. As front-end projects become more and more complex, a robust and clear module system is very important, otherwise you will be fooled at any time.
I am personally optimistic about vue2 and its family bucket
These frameworks inevitably require a compiler, a project directory, and nodejs.
I won’t talk about Koa2, Express. Those who are interested can do their own research, but this is something you have to learn laterSo it’s imperative to get started now and engineer your project, don’t be too troublesome. Of course, I only point out the path here and do not give an in-depth introduction. I will introduce how to start engineering your project in a separate article in the future. Interaction direction Data direction It is a very difficult road to walk without being black or biased. It is also very lacking. The hottest thing in 2016 is undoubtedly VR. Around 2013, Google engineers pushed a wave of webGL, but there were various performance and rendering issues. It wasn't completely done yet. (Actually, I don’t think it’s been done yet) For now, the ones that can continue to be followed are Many people don’t know why they haven’t started webGL. Indeed, a lot of three-dimensional matrix algorithm fixed-point rendering can make people dizzy at the beginning, but don’t be afraid, try blender, an open source modeling software, threejs also has this Export plug-in for the software. Although blen4web charges a fee, you can still refer to it. Other libraries were either abandoned or suddenly disappeared. Of course friends with outstanding skills and financial resources can try unity3D Tips: Try to try it on a mobile phone. The current Retina desktop display...webGL really can't be used, let alone the web, native 3D rendering is difficult on Retina displays, but you can set the parameters to render 1x, but it's just a bit ugly. By the way, do you think that if you are interactive, you don’t need to learn data-oriented things? Don't be naive, you still have to learn what you need to learn, so I say the road is not easy. There is no doubt that this is the orthodox route that everyone should agree on, and it is also a direction that has been developed very comprehensively. The road has been paved by many predecessors. Various MV* frameworks, various server-side node middleware, and the big front-end suddenly swallowed up most of the work that the back-end originally had to do. Digression: There is something called Chrome PWA project In fact, if you have time, you can take a look at it as a way to improve your skills. The author's personal opinion: With so many things to do, it is better to do the Add to homescreen function. Sometimes I feel that Chrome is really not popular in China. The current employment environment is actually very suitable for entry-level front-end, and it has eliminated Microsoft's three major cancer browsers (Taobao was the first to not support IE8, well done), even in Even if the mobile webkit kernel is not perfect, you can still write a lot of the web effects you want. Anyway, the customer objects of the old version of the kernel cannot bring you any profit at all, so it is better to give up directly. Because only the latest technology can bring you benefits and a sense of accomplishment. Various front-end tools are gradually bringing convenience to front-end development. Although it is indeed troublesome to deploy in the early stage, let me ask you, if you don’t even have this patience, I really can’t see where your future is. Then what we have to face is also a force majeure factor. I am not here to encourage you to do anything. Sometimes some blocks and some learning materials are blocked by mistake. Please be sure not to give up on this and find a way to break through the blockade. Let me give you an example. Suppose you want to use npm to install the node module. Then the first problem we face is some force majeure blockades and QoS restrictions of operators. Some friends recommended yarn to me. I tried it myself and was blocked in a mess. I think we can use npm here. Thank you very much to Taobao for forking npm. It's called cnpm. Their website address is npm.taobao.org. I won't go into details about how to use it. I'll see for myself. However, sometimes this does not meet our needs, such as some operations under the command line. 假设你有 SS 这种梯子。 Windows 命令行（同样假设你的端口如下）： 然后就可以愉快地 $ npm xxxxx… 或者 ATOM 的升级 package 也能这么干。 题外话：ATOM升级package不顺利的话，用这个方法然后命令行 要会部署nodejs环境 webpack babel gulp postCSS的插件 CSS:Less, scss HTML:pug, haml (可选) Javascript: ES6, ES7 WebComponents (可选) Vue.js / React (反正掌握一款MV* 框架是必要的) 对了还有即将大热的 hotfix， 代表作有：阿里热修复技术，据说饿了么，腾讯也出了。没去关注，但我个人觉得这个 apple 不会坐视不理的，毕竟你可以随时服务端修改APP绕过审核，这种外道招数我觉得可以学学但不要认真。 Angular 2 被小编你吃了？ Is jQuery dying? He's going to die! ? What about the agreed-upon interaction? What you mentioned above are all data-oriented. AE + bodymovin ( Development direction
The front-end has always had two directions:
In short, just choose a path you like and stick to it. Let’s talk about some trends in these two directions this year. Interactive direction
But no matter what, webGL will definitely be popular. Three.js and Mozilla’s A-frame,
especially aframe recently It’s a big move, and it all cooperates with threejs to start webVR
But here I still recommend that everyone learn webGL first and then play webVR.Data Direction
Separate development of front-end and back-end is unstoppable, and big data visualization is still very popular
If everything goes well, people in this direction will benefit from promotions and salary increases if they learn D3.js. WeChat Mini Program, which you can study as a way to improve your skills. Career Environment
那么你可以在命令行下做一些临时的 proxy 设置：
MacOS 终端（假设你梯子的端口是1087）：export http_proxy="http://127.0.0.1:1087"
export https_proxy="http://127.0.0.1:1087"
set http_proxy=http://127.0.0.1:1080
set https_proxy=http://127.0.0.1:1080
apm install [packagename]
总结:掌握的框架 / 技能
其它：
Angular 3 开发组告诉我，你又得像 ng1 转 ng 2 一样， 从头学一次。 so…你们玩得开心就好，真的，我的项目连平滑升级都做不到，我真心没办法陪你们玩。
Brother, hold on. It will not die. Even if it dies, it will still be integrated into native support. If you want to transition from jQuery to native, my uncle recommends the website for you to learn. Don’t be afraid:
https://github.com/bodymovin/bodymovin ) Go and learn,
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
