preface

In recent years, I rarely spoke in the community because I was busy with my business. Until this year, I had to rebuild the entire FOLLOWME5.0 website. In order to meet the needs of business development, I designed Genesis and launched a vue-based micro-service solution.

Some of the community’s solutions were considered at the beginning of the design, but all of them were client-side aggregation-based micro-front-end solutions that fell far short of what we really needed.

demand

  • Internationalization before FOLLOWME5.0, many projects were rendered using CSR, which resulted in the title and description of the page being shared to foreign websites or apps in Chinese, which was very unfavorable to spread when promoting overseas. Therefore, at this point, we all reject the client-side micro-front-end aggregation scheme. The starting point must be based on SSR rendering, which can internationalize the title and description of each page.

  • SEO in the era of traffic is king, through SEO optimization, is still an important channel to get free traffic. We also tried to do some SEO-related projects internally, using the most primitive back-end template rendering method, which also achieved some success, but also brought high maintenance costs. At the time we had a common header for the site, one based on Vue and one based on back-end template rendering. So, we need to have a Vue service that provides a web site header component that is called by a back-end template rendered service area, embedded in the page.

  • The old project migrated many old projects, still staying in the webpackage 2.0 version, which often had various problems in running, including CSR rendering and SSR rendering. Therefore, we need a new technical architecture, which had better be non-invasive for the old project and support CSR rendering. Internationalization of the title and description of some CSR rendered pages can be addressed.

  • One of the biggest purposes of website reconstruction this year is to solve the drawbacks of the previous architecture, and to achieve no refresh jump between pages. This seems to be a simple problem, just need to use vue-Router development in one project, but FOLLOWME has hundreds of pages, if only one application, based on SSR premise, as long as there is a failure or memory leak, for the whole site is a big blow. Or as long as every launch, the whole site will die at the same moment. So, the separation of microservices helps us spread the risk. If one service dies, it doesn’t affect another service.

  • The use of common components before FOLLOWME5.0, there was a common site header, each project was individually imported into its own project for use, followed by the problem that every time the navigation had content updates, you had to rely on more than a dozen front-end projects to update, rebuild the image, and then publish. Therefore, we need to be able to call the components of other services, whether CSR or SSR, to decouble the components and reduce the problem of a large number of projects releasing updates because of the update of one component.

Summary: We need a microservice solution that can support SSR and CSR rendering.

What are the application scenarios?

Genesis
Genesis

  • Single page application The ability to render through CSR or SSR allows you to build a single page application and wait until your project is complex enough to consider splitting services.

  • Compared to using backend rendering, you can use Genesis to build an SSR enterprise website faster.

  • If your company’s technology stack is Vue, and there are also back-end rendering projects for SEO, you can add an SSR service to allow the back-end rendering project to call your service to reuse common components.

  • Background management system with the development of business, the background management system will slowly evolve into boulder application, in the case of not changing the old project, you can consider in the new business, split into micro services, by the old project to call the new service page.

  • If your business is as complex as FOLLOWME and requires SEO and internationalization, Genesis should be your best solution right now.

How can service conflicts be avoided?

Style conflicts, which can be resolved in Vue via scoped, global variables and so on, need to be constrained by development specifications for developers.

Routing management

It’s the same as normal use, no difference. Only when you use routing for both services on a page will you need to use the Genesis wrapped Vue-Router to solve the multiple logging bug in historical mode.

Pay to share

If your company is interested in this micro service solution in Shenzhen area, you can take into consideration that your company pays to share some FOLLOWME practices, you can contact me at GitHub. Having money, I think, can make me more motivated to do a better project, after all, the house in Shenzhen is still too expensive.

portal

  • Github
  • The document
  • Vue based on Genesis + TS + Vuex implementation of SSR demo
  • In 2020, you may need vUe-based microservices architecture practices that aggregate sub-services on the server or client side