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 :
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
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 .
| 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 了 .
| 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 .