Will the front end have a future?

BOM485480 2021-02-22 23:20:51
end future

First answer the main question : Yes , either . If you look at the front end , Take the front end as a point, and then learn from all aspects of Internet technology , There will be a bright future in the future ; If you just think that the front end is just a page cutting , Do the interface of the web page , For example CSS Is it usually written by artists or front-end programmers ? That big probability has no future .
Here is my one-sided understanding of the front end , Maybe it's not right , Let's take a look .

I think the front end is very promising , Also very rich . Because this position is at the center of the technology chain . Go straight ahead , Access to product design and users , Have a clearer understanding of the company's core business lines ; turn back and proceed , It can interact with the back end and BFF(backend for frontend) And so on .

Master the company's core business line , That's basically job security And then there is ; If the front-end skills are firmly established , Keep digging back , Basically, taking the technology line is the core development 、 Going along the management line will also lead to rapid development . Because if a programmer can not only understand the business very well , And the combination of front and back end is also very thorough , That would basically be the most inaccessible person in a team .

Different forms of front end

Front end development in a narrow sense : Wechat applet is front-end development ; Various mobile The web is also the front end ; Even the vast majority of native app All of them are front-end pages .

Broad front end development : Mobile native app, BFF (backend for frontend) ,SSR (server siderendering) And so on, new technologies are also included in the front-end development category .

Many years ago , I'm just the front end of the page . Even the pages are cut very large and irregular , even div.clearfix Replace table It's not easy . Later, with the rapid development of the Internet , These have long been old topics . later jQuery Only - It doesn't smell good in a little time , Then if you jump to backbonejs, I haven't written a few apps yet, so I've come to today's single page app + fictitious dom And server side rendering .

So you can see that all the things mentioned above will be eliminated , It's just a matter of time . If we grasp the core of the problem to learn, it will be much better . My understanding is that front-end software engineering needs a software engineer first , So the basic skills of software engineers will be useful for a long time . The front-end technology stack is just a special technology stack superimposed on the software engineer .

What do you need to master as a software engineer :

Basic mathematics

Basic physics

Differential and integral calculus

● probability theory

These are the foundation of Science in high school and university , Basically we all have .

● Introduction to programming abstraction

● The principle of computer system

● Operating system principle

● Data structures and algorithms

These are CS Professional core courses .

The contents listed above are not easy to be eliminated over time . I think that as a programmer, we should first have an in-depth understanding of . On the basis of mastering these skills, plus the front-end skill tree, we can become an irreplaceable front-end software engineer .

Front end advanced route

Cut the page → Page script → Single page application → SSR → BFF → The whole stack

Next, suppose you have the above basic knowledge , How to take the front end as a point and then learn from all aspects of Internet technology . These are the roads I've traveled over the years , For reference only .

Front end related engineering

It mainly includes JavaScript(TypeScript) It's engineering . use node Scaffolding for unit testing 、 Integration testing and point-to-point Testing Automation . as well as responsive mobile-first Of CSS Related engineering . As well as the architecture ability and the overall control ability of the code . It's not just about making things , It's more about collaboration 、 Engineering considerations , for example

Easy maintenance

Easy to expand

Easy to develop

Easy to test

Easy to deploy

front end SEO

It mainly includes related meta data and html Optimization of the basic structure . also robots And other documents need to be carefully designed and optimized

XSS and DDoS Attack prevention

Everything that involves form input needs to be done well XSS Prevention of , as well as html/js escape . If you have a captcha, you need to make sure that when the user enters the wrong password , The original captcha cannot be used , Request new captcha from the back end, etc . Otherwise, social workers can hit the library every minute . Even if it doesn't hit the library , When you meet some cute kids, you can fill your database with junk ads as soon as I speak .

DDoS Prevention is relatively simple , There are ready-made manufacturers , It is recommended to turn on the firewall (cloudflare Free. tier).

basic ops Operation and maintenance

It mainly includes CDN Global static resource deployment ,load balancer Load balancing for multiple machines , And continuous integration direct update docker Mirror to K8s (Kubernetes) .

A full stack project , In addition to the front-end, you can see , There are also a lot of non valued development content hidden below the water surface , Of course, a lot of them are ops Related deployment and monitoring work .

All the money fullstack What we should pay attention to in the recommendation of the family

First of all, my I Work experience , Make sure that the technology stack I have is useful to you . I worked in Beijing in the early years web Related software development , In a foreign company 、 I've been to factories and start-ups ; Later, I came to the United States to study for postgraduate CS, After graduation, I went to local enterprises in the United States 、 Bay Area Daiwa Unicorn company . Here is my detailed story : The best time to change yourself is now

Next, let's talk about my career in web What we have learned and stepped on in the development field , I hope it works for you . With the big SaaS The rise and popularity of manufacturers ,10 Years ago, web Development 、 Deployment methods are basically E When passing by . Here's what I think is the latest ( By the end of 2020 year ) A whole set of development Deployment process . May not be comprehensive , If there's something wrong , You are welcome to correct me .

| Managed code

Suggested choice github perhaps bitbucket. It's all big , And there are free versions for individuals private repo Use . Why code hosting ? Main cause

● Easy to develop - You can see all the history, modification code, etc

● Easy to deploy - Just one push Operation can start the next pipeline To integrate all deployment steps ( The following is a detailed description of ! speak )

. |log Log management

It is mainly used to collect the server-side logs . You can try logz and loggly. in loggly Very good , Good timeliness , And flexible deployment . Both front and back can be used . They're all free tier For personal use .

| Continuous integration CI/CD Automatic deployment

There are many of them , From the early jenkins Up to now, some rookies like codefresh and CircleCl You can try anything .

So what is the role of continuous integration ?

The front end automatic part

When code push To github And then it runs automatically unit test and integration test, After passing, it will automatically compress all the front-end static resources , Include js、CSS、 images. fonts Wait until CDN The Internet , for example aws The famous s3storage. Note that there - General deployment is to use non overlay publishing , It's incremental every time . There are two advantages :

● Easy and fast rollback to previous front-end version

● You don't have to deploy like before , You need to wait until the traffic is low in the middle of the night to operate

When new static files are uploaded in place , The back end updates the static file path with changes to the new version number on the page ( That is, the version number generated by the data digest algorithm ), Make sure that the local cache can still be used on the client side for static files that have not been modified . Be careful : This is very helpful for improving the user experience of the front end , Because users don't have to reload all the front-end static resources every time , In this way, you can access almost any place in the world in seconds .

The back-end automatic part

Similar to the front end , It's just that after the run test Then the code will be packaged as an image and uploaded to K8s, Then from K8s Distributed to different cluster. On . The whole process is automated , From the code is check-in that - No manual operation is required until all updates are completed .

Automatic release docker Mirror image

Here's a word , For smaller projects, it may not be necessary to use K8s, So use docker that will do , Very easy to use . There is a free version on the official website : hub.docker.com

|Docker / CDN stor age / database hosting + load balancer

AWS Leading a variety of cloud services

It mainly includes CDN storage. database hosting and load balancer. These are basically different now cloud Manufacturers have automated , Follow the tutorial to get started . Very fast and convenient .

Login Integration login integration

Login and rights management is a big problem . Now a lot of people are still talking about their own realization , It's neither safe nor reliable . It is recommended to use doud-bas ed identity platform supplier . say - One I really like auth0, Provided by default Google Login link for . There are also nearly 100 well-known websites in the world ( Including many well-known domestic enterprises ). And automatically integrate rights management , Fool operation , Full platform support , Suggested attempt .

I've been in the front end for years , This paper summarizes a set of intensive video and learning route for front-end learning , If there are partners interested in front-end development , Whether you want to change careers , Or college students , And those who want to improve their abilities at work web Front end party , Welcome to join my front-end development exchange group :603985993 I hope you can communicate sincerely !, Synchronization with enterprise requirements . Friends are learning to communicate in it , Every day, Daniel will regularly explain the front-end technology ! You can also follow my WeChat public account :【 Front end international students 】 Update the latest technical articles every day .

 Insert picture description here
| payment gateway payment

The domestic situation is not very clear at present , It seems that the procedures are extremely complicated . From a global perspective paypal and stripe They are all good choices . Security and development convenience should be considered . After all, a good payment system is the beginning of the global online harvest . When the time comes, we'll get a two-dimensional code to collect money, which will be low 了 .
 Insert picture description here
| The heartbeat detection health check

Uptime Robot You can try . I took a look at the free version , Basically for personal websites E It's enough . If the traffic of the website drops or the opening speed is slow, he will send an email immediately 、 Text messages and phone calls .

| Enterprise mailbox

There used to be very famous qq Business mail and Google G Suite, But today, the free version of their home is basically nothing , Even a customized domain name takes a long time . So I recommend the old enterprise mailbox manufacturer Zoho, I've been using his family's since I was in China , The free version is enough to use .

| Website security DDoS

This recommendation SaaS supplier : cloudflare. It's very expensive tier It's basically enough to cope with a general attack . Of course, for the second kind of attack, the computer room may directly pull your power .

| Website traffic analysis

Google Analytics Very powerful , It's so powerful that you can often walk around and faint in it . free , Sufficient use . except GA, also heap And so on .

| There are more details on the way . ..

If you are interested, you can click “ Catch up ”, I'll talk about it later . Of course, you are welcome to my column , It's all good stuff . There are more front-end companies in the United States that like to investigate / Full stack algorithm related sharing .

This is the best time for the front end , And the worst of times .


  1. How to insert an element into the specified index of an array?
  2. 配置证书使得ngnix能够发布https的可信网站
  3. HTTP接口调试利器!4.8万Star的HTTP命令行客户端!
  4. 前端url链接带的参数加密
  5. HTTP接口调试利器!4.8万Star的HTTP命令行客户端!
  6. Is react server components OK?
  7. Summary of front end basic knowledge (4) - webpack
  8. Sass nesting rule
  9. 前端三大框架:数据绑定与数据流
  10. axios 源码阅读(一)--探究基础能力的实现
  11. Javascript中的事件冒泡与捕获
  12. #研发解决方案#易车前端监控系统
  13. 【JS】877- 35 个 JavaScript 的奇葩知识,长见识了!
  14. #研发解决方案#易车前端监控系统
  15. 高性能 Nginx HTTPS 调优 - 如何为 HTTPS 提速 30%
  16. Front end, school recruitment, Taobao, guide
  17. Front end, social recruitment, Taobao, guide
  18. javascript 十大经典排序
  19. Draw a mellow cactus with the boneless technique of Meticulous Brushwork
  20. HTTP 1.x 學習筆記 —— Web 效能權威指南
  21. Vue3元件(九)Vue + element-Plus + json = 動態渲染的表單控制元件
  22. 我的 HTTP/1.1 好慢啊!
  23. Vue為何採用非同步渲染
  24. The response status was 0. Check out the W3C XMLHttpRequest Level 2 spec for
  25. Front end monastery
  26. How to quickly understand a new front end project?
  27. webpack4.X核心工具库之tapable实例对象Hook
  28. webpack4.X核心工具库之tapable实例对象Hook
  29. C++使用libcurl进行http通讯
  30. Can be directly used in HTML special character table Unicode character set
  31. C++使用libcurl进行http通讯
  32. Java traverses list < string > and takes out the string elements in it, and splices them with ","
  33. Self taught web front end more than two months, talk about my harvest and progress, learning summary
  34. vue 中使用 css 变量
  35. 深入了解React中state和props的更新
  36. 百度分享不支持https的解决方案
  37. [practical] ABAP mail sending (HTML + attachment)
  38. [practical] ABAP mail sending (HTML + attachment)
  39. Teach you how to select products with less profit and competition in Amazon Product Development (1)
  40. 【微前端】微前端最终章-qiankun指南以及微前端整体探索
  41. 【微前端】微前端最终章-qiankun指南以及微前端整体探索
  42. Vue-Cli 创建vue3项目
  43. Go in the front of the progress of u boot v7.0 U disk boot disk production tools
  44. 使用NTLM的windows身份验证的nginx反向代理
  45. Rust教程:针对JavaScript开发人员的Rust简介
  46. 使用 Serverless Framework 部署个人博客到腾讯云
  47. #研發解決方案#易車前端監控系統
  48. Vue changes localhost to IP address and cannot access
  49. JavaScript进阶学习
  50. HTML5 from entry to proficient, realize annual salary 10W +, zero basic students must see
  51. Vue:vuex状态数据持久化插件vuex-persistedstate
  52. Vue source code analysis - start
  53. Vue -- the child component calls the method of the parent component and passes parameters --- props
  54. React-Native 获取设备当前网络状态 NetInfo
  55. 高性能 Nginx HTTPS 调优 - 如何为 HTTPS 提速 30%
  56. How to learn HTML5? How can Xiaobai start HTML5 quickly?
  57. HTML + CSS detailed tutorial, this article is enough, but also quickly save
  58. JavaScript高级:JavaScript面向对象,JavaScript内置对象,JavaScript BOM,JavaScript封装
  59. Why Vue uses asynchronous rendering
  60. JavaScript高级:JavaScript面向对象,JavaScript内置对象,JavaScript BOM,JavaScript封装