This article takes a look at front-end development from a front-end development perspective.

To read the full article, it will take about 8 minutes.

What is front end separation

To distinguish between the front end and the back end, a clear line needs to be drawn. In general, the user can directly see things, are belong to the front-end category, in addition to the front-end belong to the back-end.

You are responsible for beauty, I am responsible for making money to support the family

In the traditional development mode such as ASP, JSP and PHP, the front end is in a chaotic state, it can be said that there is no independent “personality” to speak of.

The front end is responsible for cutting diagrams and writing static page templates, while the back end renders data to the page templates provided by the front end, and finally renders the page to the browser for display.

In this process, the front end only provides page templates or writes some JavaScript scripts, and some JS scripts are written by the back end. The role of the front end is only limited to cutting diagrams and style template files. This role is the legendary “cutting diagrams”.

That’s why the industry thinks the front end is a very easy job, one that can be done in a week by learning the simple skills of HTML, CSS, and PS.

Now, at that time the front end is a soy sauce, development prospects are very limited. At that time, JavaScript scripts were relatively simple, and a single jQuery could sweep the world, so backend programmers proficient in language class code could learn JavaScript quickly, and there was less room for front-end development.

The separation of the front and back ends is not just a simple separation of code.

First, decouples the architecture and gradually gets rid of the dependency of the front and back ends on the architecture. The front and back ends are deployed on different servers separately and transmit data through RESTful interfaces. Reduce the pressure on the backend server, which is no longer responsible for page rendering, but only for input data, and the throughput is increased several times.

The second is logical separation. Without separation, the boundary of business code is very unclear, and the business logic is basically put in the back end. After separation, the front end also undertakes part of the business logic that should not be written by the back end, and the data processing is more clear.

Finally, system separation. The same back-end system can provide the same interface data to different front-end terminals, such as PC terminal, Mobile terminal and Native terminal. There is no need to provide a set of interfaces for each terminal. Similarly, for front-end applications, it is more convenient to call the interfaces of multiple back-end servers to process and display data between multiple systems.

Why do we separate the front and back ends

The separation of the front and back ends makes the process of software development clearer and solves the pain points in the development stage.

Previously, the front-end not only had to learn the template rendering syntax of the back end, but also had to configure the back end development environment and constantly synchronize the back end code, which was painful for the front end.

Now, the front-end has its own server, so it does not need to rely on the back-end server to support the project operation. In the development stage, mock data can be used (the interface data structure must be determined with the back-end first) to get rid of the dependence on the back-end interface, which greatly improves the development efficiency and makes the system division of labor clearer.



Of course, if it’s just a concept, it’s not technically possible.

With the development of front-end technology, gulp, Webpack and other front-end engineering tools have been developed in just a few years. HTML5 and JavaScript are also constantly updated with new features, providing front-end application scenarios and technical support for developing front-end independent applications. React Native, PWA and wechat Applet are all developing mobile apps and small applications based on front-end technology, and the front-end has entered the best era.

The development of front-end technology in recent years has also made the back-end end no longer bound to the front-end under its own banner, must be free to let the front-end break out of its own day, play the advantages of the big front-end. Just to take a look at how front-end technology has evolved in recent years to make it possible to separate the front and back ends.

  • The rise of microservices, system architecture decoupling, front-end and back-end separation are inevitable trends.

  • In 2009, Google released angularJS, which brought the idea of back-end MVC to the front end. Features like modularity, directives, and two-way binding make it possible to build a front-end application project.

  • The HTML5 specification was finalized in 2012 and the standard was implemented in October 2014. The new features of HTML5 have accelerated the development of the front end. ECMAScript 6 was officially released on June 17, 2015, bringing with it many new language features such as class, Module and Promise.

  • Nodejs makes it possible to write server-side programs with JavaScript, which can develop a system from the front end to the back end. Nodejs event drivers are prominent in load balancing, and more and more Nodejs servers are being used in production environments. With nPM-managed JavaScript modules, you can quickly build a pluggable system.

  • Experienced the modularization of RequireJS, developed ReactJS, VueJS and other front-end frameworks, promoted the front-end modularization to a new height, combined with ECMAScript 6 language class, module, etc., compiled with Babel into ES5 syntax that can be recognized by browsers. Building a front-end application is easy with packaging tools like Grunt, gulp, WebPack, and Rollup.

  • The front-end scene has also jumped out of the PC side of the web page, there are mobile H5 page, wechat page, Hybird App embedded page and so on.

What you can do with front-end technology

Website website is the most basic form of the front end, the most basic is the PC site, mobile site. It can be opened in the browser, wechat or various apps (this is how webView is always opened in the APP).

H5 game H5 game has been seen not strange, when wechat quit the masturbation game, promoted the great development of H5 game. It requires no installation and can be accessed through a mobile browser. Its biggest feature is that it is lightweight and simple.

The development of H5 games adopts HTML5 canvas and other production, or webGL can also be used to do 3D H5 games.

Mobile apps are Native development languages. For example, to develop IOS apps, you can use Object-C, Swift, etc., and to develop Android apps, you can use JAVA or Kotlin, etc.

When we say mobile APP, we mean using front-end technology to do it. Ionic is the most popular Hybird APP framework in the past few years. There are also muI and HTML5+ frameworks developed by Chinese developers. These frameworks combine HTML, CSS and JavaScript into a single file, access the file in a WebView, and then cover it with a native APP shell. Generate IOS and Android installation files. This kind of APP can do a lot of simple apps, but is not suitable for apps with complex interaction, because there are still some problems in the performance of WebView, which is quite obvious on Android devices.

In the past two years, React Native based on React syntax and Weex framework based on Vue syntax have become a new generation of mobile APP development frameworks using front-end technology. They abandon WebView and use a new rendering mechanism, greatly improving APP performance and experience. At present, both are in the stage of perfection and are very promising in the future.

Desktop Applications Electron, a framework based on Nodejs and Chromium, makes it possible to develop desktop applications across operating systems using HTML, CSS, and JavaScript, running on Windows, maxOS, and Linux.

Chrome APP Is an HTML application that runs on Chrome and is developed using front-end technologies.

In 2010, Google launched Chrome OS, a PC operating system developed based on Chrome, which is characterized by fast speed and simple design. Correspondingly, many laptops based on Chrome OS have been launched in the market, including Samsung and Dell.

In January 2017, wechat withdrew from the small program, once detonated the front-end industry.

Small program in accordance with the front-end technology to design and development, but also do a good system compatibility and different equipment adaptation design, developers only need to focus on the implementation of business code. So, as long as familiar with the front-end technology can quickly make a small program.

In the past two years, artificial intelligence and machine learning are the emerging and hot technologies of Web VR and Web AR, followed by VR and AR. At the end of last year, QQ and Alipay made attempts in AR and VR, and practiced in grabbing red envelopes.

Webgl, the front-end technology, can realize 3D scenes well in the browser, and Three.js is a convenient and good JavaScript framework. Chrome is compatible with Web VR. With Daydream View, you can browse Web VR pages.

What are the things to consider after the front and back ends are separated

After the separation of the front end, is no longer a simple HTML file, has been an independent application system. In addition to considering the page data rendering display, but also with the thought of engineering to consider the front-end architecture, front and back end interaction and data security and other things.

architecture

Front-end applications are deployed on Nodejs, Nginx or a combination of Nodejs and Nginx servers, and forward page requests to back-end servers through reverse proxies, which is equivalent to adding Nodejs layer to the traditional process. Of course, Nodejs server can also take part of the load balancing work, and the business logic can also be handled in Nodejs layer. For example, the request can be sent to different back-end servers by determining whether the request is from PC or APP.


RESTful interface interaction After the front and back ends are separated, RESTful interfaces are used to communicate with the back end.

REST stands for REpresentational State Transfer, an API architectural style that transfers REpresentational State between clients and servers to drive the evolution of application State.

In a REST-style Web service, each resource has an address. The resource itself is the target of the method call, and the method list is the same for all resources. These methods are standard and include HTTP GET, POST, PUT, DELETE, and possibly headers and OPTIONS. RESTful API design enables the back-end to pass data to the front-end through the interface, usually in a common format such as JSON. For the front end, as long as the back end returns RESTful data on the line, whether the back end is written in Java, or python or PHP, please rely on the back end, do front-end system independence.

Engineering construction

Nodejs can be used not only as a front-end server, but also in the development phase.

The front-end ecosystem is built around Nodejs. NPM is used to manage project dependencies, which are well maintained and run on Nodejs.

Packaging tools such as Grunt, gulp, Webpack and rollup all run on NodeJS and input an application into a complete application with syntax-compiling, packaging and deployment plug-ins.

If you’re using the Angular, React, or Vue frameworks, or if you’re using ES6 syntax that isn’t compatible with the browser for the time being, you’ll need to use Babel to compile the syntax into ES5 syntax that the browser recognizes before packaging the app.

SPA SPA, short for Single Page Web Application (SPA), is a single Web page application that loads a single HTML page and dynamically updates the page as the user interacts with the application.

Angular, React, or Vue are designed for SPA. Combine front-end routing libraries (react-Router, VUE-Router) and state hot storage (Redux, VUex) to create a Web APP comparable to Native apps. The user experience has been greatly improved.

Of course, SPA is not perfect, nor is it suitable for all Web applications, and needs to be selected according to project and scenario.

SPA has the following disadvantages:

  • The initial loading time increases. You can improve performance by splitting code and lazy loading to reduce initial loading time.

  • SEO is not friendly and can now be partially addressed with Prerender or Server Render.

  • The forward and back end of the page needs to be written by the developer, but now some routing libraries have helped us to solve the problem.

  • It has high requirements for developers. As SPA needs to understand a whole set of technology stacks, it is necessary to consider whether there are appropriate candidates for maintenance in the later stage.

Know which technologies are best for developing front-end applications

Front-end technology changes with each passing day and develops rapidly. As a front-end engineer advancing with The Times, we still need to constantly learn and update the technology stack. In that case, what are the techniques we need to master?

Here are some of the front-end technologies, some of which are no longer used in new systems, but many of which are used in older systems.

Language knowledge

  • ES5 & ES6 & ES7 // ES language basics

  • HTML5 API & CSS3 // HTML5 and CSS effects

  • Less & Sass // CSS precompiled language

  • SVG & Canvas & d3.js // Graphics data visualization

  • WebGL & three.js // 3D scene

  • CMD & AMD & CommonJS // Language standards

  • RequireJS & SeaJS // ES modular library

  • CoffeeScript & TypeScript // ES language style library

  • NodeJS & Express & Koa // Node WEB server

  • TCP & HTTP & WebSocket // Network protocols

  • .

Frameworks, libraries,

  • jQuery

  • Backbone

  • Ember

  • Angular & Angular2 & Angular4

  • React

  • Vue & Vue2

  • Ionic & Ionic2

  • React Native

  • Weex

  • Electron

  • .

tool

  • Sublime Text & Atom & Webstorm & VS Code // Editor, IDE

  • SVN & Git // Code management, version control

  • Chrome Dev Tools & FireFox Developer Edition // Browser Developer Tools

  • ESLint & JSLint // JavaScript code syntax checks

  • React DevTools // React debug tool

  • Redux DevTools // Redux debugging tool

  • Vue DevTools // Vue debugging tool

  • Grunt & Gulp & Browserify & Webpack // code packaging tools

  • Babel // ES6, React and other syntax conversion tools to convert code to ES5

  • Forever * pm2 // NodeJS project deployment tool

  • Karma & Mocha & PhantomJS // Automated testing framework

  • .

Afterword.

The arrival of the front-end era is the best of times and the worst of times for front-end development.

It’s the best of times because all the front-end technologies have been updated and applied to more scenarios, playing a greater role and advantage. There are a lot of opportunities for front-end developers.

In the worst era, the speed of technology update and iteration is very fast. The whole technology stack may be updated within two or three years. Developers need to keep learning and update their knowledge base, so as to be beaten to the top of the wave in the tide of technology change.