A, origin

Legend in a long, long time ago, a man with lofty ideals came up with an idea to start a business, so he started his own dream of starting a business. However, there was a shortage of hands, so all the characters Lao Tzu were employed:

  • Roles: PM, DBA, RD, FED, Designer, …
  • Skills: Linux, MySQL, JAVA, JavaScript, HTML, CSS, …
  • Tools: phpmyadmin, photoshop, powerpoint, …

Let’s use the Express application generator to simulate traditional development (since I’ve forgotten how Java is written, this is just for demonstration purposes).

$ npm install express-generator -g # installation express - the generator

$ express progressive Initialize the project

$ cd progressive # enter directory

$ npm install # install dependencies

$ npm start # Start a project
Copy the code

Then we happily opened localhost:3000 and saw our page:

Next, I look at the code:

Jade is used for dynamic rendering by the NodeJS server:

// app.js
app.set('view engine'. 'jade');
Copy the code

Then when I access localhost:3000, I start rendering the interface:

// routers/index.js
router.get('/'. function(req. res. next) {
  // Suppose I did a SQL query to get the title value, and then inserted the title value into the template engine
  .
  res.render('index'. { title: 'Express' });
});
Copy the code

Then I studied the Jade syntax for further development:

// index.jade
extends layout

block content
  h1= title
  p Welcome to # {title}
Copy the code

Then we started the follow-up development…. After a few months, we wrote SQL, jade, and node…. . Done PM, done DBA, RD…. Finally a project is finished. Then I happily got the investor’s investment and became rich. I couldn’t do everything by myself in the project iteration, could I? I can find several people to work on the development, so I hired the front end, hired the back end, hired PM….

The rest of the development happily opened my code:


. WTF is who put gloves in the pot to cook…

Second, to better partition, we started refactoring

After finding the problem, in order to better get rid of the relationship between the front-end and the back-end, we want to separate the interface of the data layer and interact in the form of Ajax, so that the server is only responsible for rendering logic, not data filling. The data portion of the page interacts with ajax JSON in form, so our structure might look something like this:

So now my page request logic looks like this:

// routers/index.js
router.get('/'. function(req. res. next) {
  res.render('index');
});
router.get('/getTitle'. function(req. res. next) {
  res.json({
    code: 0. 
    msg: 'success'. 
    data: 'express'
  })
});
Copy the code

Create index.js on the page

ajaxGet('/getTitle'. function (err. res) {
    $('#title').text('welcome to ' + res.data);
});
Copy the code

Refactoring index. Jade

extends layout

block content
  h1= title
  p#title

append scripts
  script(src='/javascripts/jquery.min.js')
  script(src='/javascripts/index.js')
Copy the code

This completes the problem of the front and back end data interaction layer. But: The boundaries between the front and back ends are divided by browser and server. Then we often find some problems:

Then, as front-end development, we will encounter the following problems in the actual development scenario:

  1. Environment: Local development requires a back-end environment, such as nodeJS service (tomcat, Apache…. may be required for other languages) , affecting the development efficiency
  2. Syndication: the front and back ends share a set of server environment, so the code needs to be synchronized in time, resulting in low efficiency. At the same time, the front end is more focused on browser adaptation, effect display and user experience, while the server is concerned about data security and reliability…
  3. Interface:
  • Generally, word documents are used for interface definition. It is difficult to understand interface fields during front-end development, which affects development efficiency
  • Interface changes require rewriting of documentation and resending, affecting development efficiency
  • Scattered documents affect interface maintenance

If something affects the development efficiency, it shows that the existing model still has problems. Obviously, the solution to the problem requires us to rethink the definition of “front and back end”.

Practice of separation of front and rear ends

In order to improve the development efficiency, our front-end MV* era began to arrive:

The front and back end data interact with each other through JSON. They are not related to each other. The interface is separated. MODEL layer – JAVASCRIPT OBJECT, VIEW layer – JAVASCRIPT TEMPLATE. Backbone, EmberJS, KnockoutJS, AngularJS, React, Vue…

So we began a new journey: single-page development for MVVM:


If we pull out the service layer, the resulting directory structure might look something like this:

Our server provides the interface to interact with the front end:

// routers/users.js
let express = require('express');
let router = express.Router(a);
let usersCtrl = require('.. /controllers/usersCtrl')

router.post('/login'. usersCtrl.login)
router.post('/sign'. usersCtrl.sign)
router.get('/getUserInfo'. usersCtrl.getUserInfo)
module.exports = router
Copy the code

At this point, the front end uses vue-CLI to generate scaffolding and get the data back by installing AXIOS to make Ajax data requests. The front and back ends are not related to each other.

But: The new requirement is to define the data interfaces on the front and back ends, so does the front end need to wait until the server side interfaces are developed? What about the front and back end separation?

At this point, the front end may mock the data, and the front and back ends need to define the interface specification together, so we happily write a lot of mock files locally. One day interface suddenly want to change a field, and did not timely notice the front end, over…. Or collaborative development between team members, we need to synchronize mock data, and we need to do git commit over and over…. How is mock data managed as the complexity of the project increases?

At this point, we need a mock server, preferably one that can synchronize the mocks of the server-side interface. Of course, there are already mature solutions online, such as Easy-Mock. It supports Swagger well, which is a blockbuster feature that allows you to create all of your project’s Mock interfaces in just 1 second.

Having said that, we have completed a basic separation of front and back ends, and I will move on to mid-tier NodeJS applications and front-end automation publishing and scaffolding issues. If you have different opinions about this article, you are welcome to discuss them together.

About:

Author: monkeyWang

Refer to the article: Separation of the front and back ends in practice. Taobao front and back end separation practice

See server code for the source of this article. Front-end code. Scaffolding based on VUE and Easy-Mock

My homepage: monkeyWang

I will continue to cover issues related to mid-tier NodeJS applications and front-end automation publishing and scaffolding….