1. If you were to create a large, heavily visited website, how would you manage all your CSS, JS files and images?

(1) Follow a custom set of CSS, JS and image file and folder naming conventions

(2) Depending on the front-end engineering tools adopted, according to the tool scaffolding specification (GULP, Webpack, Grunt, Yeoman)

(3) According to the adopted framework specification (Vue, React, jQuery)


2. How do you build your project if you don’t have a framework

Try to build an MVC architecture with native JS:

(1) Basic modules

Common: a common component used by the following modules

Config: configures the module to solve the configuration problem of the framework

Startup: Start the module and solve the problem of how framework and Servlet integrate

Plugin: Plugin module, implementation of plugin mechanism, provides abstract implementation of IPlugin

Routing: A routing module that resolves the request path and provides an abstract and basic implementation of IRoute

Controller: Controller module, how to create a controller

Model: A view-model module that addresses how to bind method parameters

The Action: Action module, which deals with how methods are called and the results they return, provides an abstract and basic implementation of IActionResult

View: A view module that addresses the adaptation of various view engines and frameworks

Filter: filter module, solution is to execute the Action, return IActionResult before and after the AOP function, provides the abstract implementation of IFilter and basic implementation

(2) Expansion module

Filters: Some implementations of ifilters

Results: Some IActionResult implementations

Routes: Some implementation of IRoute

Plugins: Some implementations of iPlugins


3. Where to start when choosing a framework

There are many factors that affect a team’s technology selection, such as technology composition, new technologies, new frameworks, languages, and releases. In order to better consider the different factors, it is necessary to list important quadrants, such as development efficiency and team preference, in order to determine which framework is best for the current team and project. Time to go live affects the choice of framework, do not blindly replace the existing framework.

(1) the jQuery

The project functions are relatively simple. You don’t need a single page app, you don’t need a MV* framework. The project is a legacy system. Rather than replace it with another framework, save it to rewrite the project later.

(2) AngularJS

When making an app that doesn’t require a lot of performance, we should opt for AngularJS, a faster development stack with the ionic framework of hybrid development capabilities. For complex front-end applications, there is still plenty of room for improvement in the efficiency of angular.js applications. Angular2 requires learning a new language and choosing it carefully.

(3) the React

React was chosen for two reasons. First, Virtual DOM was used to improve operational efficiency, and second, componentalization was used to improve development efficiency. Preferred for large projects. React Native, React VR, etc. React can run on different platforms. React also makes it easy to write native apps, and VR apps.

Unfortunately React is just a View layer, which was created to optimize DOM manipulation. To complete the React project, we needed routing libraries, unidirectional flow libraries, Web API call libraries, test libraries, dependency management libraries, etc. There was a lot of extra work to be done to build a complete React project.

(4) the Vue. Js

For developers using vue.js, we can still write code using familiar HTML and CSS. Also, vue.js uses the idea of Virtual DOM, Reactive, and componentization, which allows us to focus on writing applications, not their performance.

Vue.js is a great choice for small front-end projects with teams without Angular and React experience.



4. Talk about front-end templates and rendering

(1) Page-level rendering, back-end templates

Such as Smarty, this method is characterized by fast data display, direct back-end assembly of data and templates, in front of the user, SEO friendly.

(2) asynchronous request and new template, front-end template

Like Mustache, ArtTemplate, the syntax of a front-end template parsing engine is the same as the syntax of a back-end template parsing engine. The result is a copy of the HTML used both before and after.