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.