With the explosion of the mobile Internet and the awkwardness of responsive pages, web and mobile projects have become standard, but there will be more.

Multi-project development is a big challenge for the front end

  1. Repeat, repeat front-end architecture, repeat front-end dependencies, repeat utility functions, etc
  2. Limitations, different background has different rules, “adapt to local conditions” really uncomfortable, just wait on goodrailsHere comes another onephp
  3. Optimal, back-end engineering to do front-end construction, always seems not enough “optimal”.

So, we need to separate the front-end development project, organize the code according to the front-end, and use the build tools to optimize the front-end resource files. So the new problem is, how do you manage this rapidly iterating, frequently updated front-end project?

  1. Managed as a separate project?
  2. Git submodule or Git subtree

Multiple background projects: Qdaily4_Web/Moible/APP Front-end project: qdaily4_feboierPlate

Previous development patterns

  1. inqdaily4_feboierplateModify the front-end code in the project
  2. buildqdaily4_feboierplateProject, output toqdaily4_web/mobile/app
  3. submitqdaily4_feboierplateProject changes
  4. inqdaily4_web/mobile/appModify background code in the project
  5. submitqdaily4_web/mobile/appChanges to the project, includingqdaily4_feboierplateProject build output file

This development mode decouples the front-end project and the back-end project, the front-end project strictly according to the front-end code structure to organize the code, can achieve modularization, on-demand loading, the principle of proximity, image compression and other functions. The drawback is that you need to switch project submission code frequently.

In order to solve the problem of frequently switching projects, after investigating git submodule and Git subtree, we choose to use Git subtree to solve this problem.

The current development model

Qdaily4_feboierplate is a subproject of qdaily4_Web/Mobile/APP, alias appFE

  1. inappfeModify the front-end code in the project
  2. buildappfeProject, output toqdaily4_web/mobile/app
  3. submitqdaily4_web/mobile/appChanges to the project (changes to the APPFE project will also be recorded)
  4. Commit using git subtreeappfeChanges to theqdaily4_feboierplate

After the introduction of git subtree, it no longer feels like developing two projects, no need to frequently switch project submission code, just need to use git subtree command to achieve bidirectional update of qdaily4_feboierplate project, fast development. The defect is that there are multiple copies of the qdaily4_feboierplate item.

Two-way update

The front-end project qdaily4_feboierplate is included in multiple background projects as a child Git. We realize bidirectional update of qdaily4_feboierplate through git subtree pull & Git subtree push. This is fine for modules that are unstable and need to iterate quickly.

Using Git subtree to manage front-end module projects and multiple background environment projects, it can effectively and quickly realize the rapid development of front-end module projects, two-way update, with the front-end construction system, it is absolutely cool.

tip

Git repository alias

Use appfe as [email protected]: qdaily/qdaily4_feboierplate warehouse alias

  1. Direct command line input: 
    git remote add appfe [email protected]:qdaily/qdaily4_feboierplate.gitCopy the code
  2. You can also configure it.git/configFile: 
    [remote "appfe"]
 url = [email protected]:qdaily/qdaily4_feboierplate
 fetch = +refs/heads/*:refs/remotes/appfe/*Copy the code

Git instruction customization

Git directives can be customized to make them easier to remember

  1. configuration.git/configMake git subtree commands easier 
    git subtree add --prefix=appfe [email protected]:qdaily/qdaily4_feboierplate.git master
git subtree pull --prefix=appfe [email protected]:qdaily/qdaily4_feboierplate.git master
git subtree push --prefix=appfe [email protected]:qdaily/qdaily4_feboierplate.git masterCopy the code
    [alias]
 stadd = subtree add --prefix=appfe [email protected]:qdaily/qdaily4_feboierplate.git master
 stpull = subtree pull --prefix=appfe [email protected]:qdaily/qdaily4_feboierplate.git master
 stpush = subtree push --prefix=appfe [email protected]:qdaily/qdaily4_feboierplate.git masterCopy the code