before the web2.0, while writing JSP, although there are ES and jstl, but still adhere to the JSP. Behind in the outsourcing company in order to fast delivery, or the use of PHP smart technology. web2.0, the front-end template technology is popular. There are three main categories of representatives:string-based Template Technology (string-based parse and compile procedures)dom-based Template Technology (DOM-based link or compile process)Living Template (string-based parse and DOM-based compile process)string-based TemplatingThis is a string-based template technique that constructs a complete HTML string, with strings and data as input, by replacing placeholders with the required data with regular expressions. the string template engine relies heavily on these Dom api:createelement,appendchild,innerhtml. In these APIs, innerHTML has the best readability and practicality, becoming the de facto main standard, although other APIs may be better performance, but the native JS string generation scheme, the most commonly used is the innerHTML. string-based template engine The biggest credit is freeing you from a lot of string concatenation of logical strings, which has some irreplaceable advantages due to its completely string-based nature. It is essentially a-to address the need-populate an HTML view with data in a better-a-do than have to write a Big, ugly string concatenation expression.
- Fast initialization time: Many angular string-based templating seem to miss out on this.
- Isomorphism: Complete dom-independent, can be used as server-side and browser-side (Sir first don't hurry to move Phantomjs ha).
- More powerful syntax support: because they are either self-built DSLs or JavaScript-based syntax, parser's flexibility is not the same as HTML-constrained dom-based template technology
because the string-based template method relies on innerHTML rendering, the following problems are present.
- Security issues: Using innerHTML to build the DOM is a security risk, and the dynamic data used for rendering may have security vulnerabilities that could cause XSS attacks or csrf attacks without specific escape processing.
because innerHTML has security implications., for example:Image upload failed? Retry, I know that good programmers like you don't write code like this, but when HTML fragments are not completely controlled by you (such as from a remote server), this can be a bomb that can detonate.
- Performance issues: Replacing the DOM with innerHTML is inefficient, even if only one property or text content of the DOM is replaced, and the entire DOM must be replaced by innerHTML, causing the browser to reflow and redraw.
- Development efficiency issue: Because the string is spliced in a particular function after a regular expression match, it is easy to duplicate the calculation and completely remove the existing DOM and re-render again, and the events and states mounted on the DOM will no longer be saved
- It is possible to create unexpected nodes: Because the HTML parser is so "friendly" that it accepts an irregular notation to create an unexpected structure, and the developer is not given the wrong hint.
representative:
- Mustache and its derivative handlebar, etc.: weak logic
- Dust.js: Strong logic (recommended)
- Dot.js: Super fast
dom-based Template TechnologyThis is a DOM node-based template technology, through the innerHTML get the initial DOM structure, and then through the DOM API level from the original DOM attributes extracted events, instructions, expressions and filters and other information, compiled into Livingdom, to complete the data model and View Two-way binding. Angularjs is the representative of dom-based template technology. Dom-based's templating technique does not actually have a complete parse process (aside from the expression), and if you need to create a view from a string, you are bound to get the initial DOM structure through innerHTML. The engine then leverages the DOM API ( Attributes,getattribute,firstchild. etc) at the level of the original DOM from the properties of the extraction of instructions, events and other information, and then complete the data and view binding, so that it "active." so dom-based's template technology is more like a "link" and a "rewrite" * Process between data and DOM. Note that dom-based's templating techniques do not necessarily use innerhtml, such as when all templates are written in the portal page, but the parse process is still the browser. dom-based Template technology is more flexible and more powerful than string-based template technology, which achieves a certain sense of data-driven.
-
-
- Powerful appendages such as directives help us to develop the app in a declarative way
However, it has the following problems:
- Information redundancy: information is hosted in attributes, which is actually unnecessary and redundant.
because the dom-based template technology obtains the DOM compile node through the innerHTML, the information carries in the attribute, causes the unnecessary redundancy, simultaneously also affects the reading, enhances the development difficulty. One solution is to remove them, such as removeattribute, by reading the properties and then removing them, which is not necessarily necessary and does not actually solve their Dom's strong dependency, but also affects performance and reduces the user experience.
- Initial node acquisition problem: Get the initial node through innerHTML, there is no independent syntax parser or lexical parser, and HTML is a strong dependency. The first entry to the DOM content is a template, rendering takes time, so it will cause content flashing--fouc (Flash of unstyled content) This needless to say, only blame it first into the DOM content is not the final content.
- Without a separate parser, the initial node must be obtained through innerHTML (or the first screen), i.e. its syntax is strongly dependent on HTML, which also causes it to have potential security problems
representative:
- AngularJS: It's 28000star, you need to say more?
- Knockout: In this area, it is the originator of the Web front-end
Livingtemplate TechnologyThe biggest difference between livingtemplate technology and string-based, dom-based template technology is that you don't rely on innerHTML to render and extract the information you need. The main idea is: first, combining data binding technology, using mature lexical parsing and parsingtechnology that parses the input string into an abstract syntax tree ast, rather than simply matching a specific syntax with a simple regular expression, and then string stitching, and secondly, by compiling the AST to create a Living DOM with data dynamic binding, thus avoiding the use of innerHTML, Solve the browser element flashing problem, improve the security of the application, which is shown in principle 1. As shown in Figure 1, the input string is lexer by the lexical parser to generate the corresponding lexical block. Lexical blocks are constructed using the syntax parser Parser to construct an abstract syntax tree AST. The AST is then compiled into a livingdom with Dynamic data binding, which enables two-way binding of View and model. Unlike the dom-based template technology, which uses the DOM node to host information, its intermediate product AST hosts all the information needed in the compile process (statements, directives, attributes ...). And so on). we can find the advantages of living templating almost simultaneously with string-based and dom-based template technology a custom DSL, such as a string template, is used to describe the structure to achieve syntactic flexibility and to host the information (AST) after parse. In the compile phase, the AST and Dom APIs are used to assemble the view, and during the assembly process, we can also introduce dom-based template techniques such as directive and other fine seeds. Living template ' s close relative--react react, of course, can also be called a template solution, which also cleverly circumvents the innerHTML, but uses a radically different strategy: react uses a virtual DOM technique, which is also based on dirty checking, but what's different is that Its dirty check occurs on the view plane, which occurs on the virtual DOM, allowing for a small overhead to implement local updates.
- Lightweight, read and write operations in the DOM are inefficient.
- Reusable.
- Serializable, you can preprocess the process locally or on the server side.
- Security because security doesn't require innerHTML to help us generate the initial DOM
representative:
- Htmlbar: Two compilations running after handlebar
- Ractivejs: Independent
- Regularjs Independent
This article also needs to be further collated, as well as to customize the template engine thinking direction and engineering practice content supplement. This requires a lot of effort or needs, please look forward to. Reprint Please indicate the source " again talk about front-end HTML template technology " and reference document reference links. If there is infringement and improper in this article, please notify me to amend, this article is still the first draft status. Thanks Reference Documentation:design and implementation of Dynamic Web Template technology based on data driven"Communication and discussion" How do you see front-end Template technology ... principle and partial realization of template enginebuild a front-end template engine that uses Virtual-domsummary of the front-end data template engineHow to implement a DOM-based template enginea comprehensive summary of the front-end template technology
Another discussion on front-end HTML template technology
