One of the 23 classic design patterns, the Facade pattern, hides internal complexity and exposes an easy-to-use interface by introducing an intermediate layer between clients and subsystems.

With the introduction of facade mode, it is much easier for clients to use without needing to know the details.

For example, before the facade pattern is used, there might be a call relationship where the client needs to understand every internal detail

With the Facade pattern, the client no longer needs to know about each module, only needs to tell its requirements to the Facade, which then invokes the internal module

Added a facade, does it change the function? No, it just makes the external interface easier to use. That’s what facade patterns are all about: encapsulating internal details and simplifying calls

In fact, there are too many such presets in the software world, various DSL (Domain specific language) including HTML, CSS, Vue template, React JSX are presets, and Babel and ESLint are preset.

Let’s analyze it separately.

Simplify the facade of DOM creation: HTML

Browsers provide DOM apis that allow you to build DOM trees, so why HTML? Is it ok not to use HTML?

For example, the DOM API creates the DOM:

const div = document.createElement('div');
div.className = "a";

const img = document.createElement('img');
img.src="./b.jpg"

div.appendChild(img);
Copy the code

And HTML describing dom:

<div class="a">
    <img src="./b.jpg">
</div>
Copy the code

There is no difference.

So HTML doesn’t add functionality, it just simplifies DOM manipulation, which is clearly a facade pattern, but in a DSL way.

A DSL is a domain-specific language that designs a syntax to simplify the description of logic, and then parses the language to specifically describe the goal. Browsers build dom trees by parsing HTML.

Simplified style description facade: CSS

CSS is also a DSL to simplify the description of style information.

For example, styling the DOM directly can be cumbersome:

const div = document.querySelector('.a');
div.style.backgroundColor = 'blue';

const img = div.querySelector('img');
img.style.border = '2px';
Copy the code

Adding CSS is much easier:

.a {
    background-color: blue;
}
.a img {
    border: 2px;
}
Copy the code

Are there any new features in the CSS? No, it just makes style description easier, and CSS is a DSL that is parsed by the browser.

The template of vue

We know that it’s enough to manipulate the view based on the DOM API, and the front-end framework maps the data to the view, and the target of the mapping is the DOM API (of course, with a layer of virtual DOM in the middle, the API also creates the virtual DOM first), but the DSL doesn’t need to use HTML. It could have been described in a different way that was more suited to its characteristics.

Vue selects template:

It’s not intuitive to describe a view directly using the API:

render: function (createElement) {
  return createElement('h1'.this.blogTitle)
}
Copy the code

Vue chooses template, similar to HTML:

<h1>{{ blogTitle }}</h1>
Copy the code

This doesn’t add functionality, just makes it easier for developers to describe views using frames, and vUE also supports filters, directives, interpolation syntax, and more.

The template DSL, however, needs to be compiled. Unlike HTML, which is parsed by the browser, this custom DSL needs to be parsed by its own compiler, so vue has a Template Compiler to convert the template into the render function.

The react of JSX

React also maps the description of a view to a real DOM (with a layer of virtual DOM in between). It first provides an API, but for simplicity, it provides a way to describe a view: JSX.

Using the API directly is cumbersome:

const title = React.createElement("h1", {className: "main"}, "Hello React");
Copy the code

JSX’s approach is much simpler:

const title = (
  <h1>Hello React</h1>
);
Copy the code

Vue and React chose a different DSL. We know that DSLS need to be compiled into specific API calls, vUE is implemented inside the framework, and React JSX is implemented as Babel (since it is an extension of THE JS syntax).

As you can see, neither vue template nor React JSX has added any new functionality, adding such a layer of DSL is just to simplify the description of the view by developers, which is consistent with the design purpose of HTML, which is the idea of facade mode.

The Babel of preset

Babel does code conversion, converting es Next’s syntax into the JS syntax supported by the target environment by plug-in after plug-in. However, it would be too much trouble for developers to specify plug-ins directly. For example, ES2015 has a series of plug-ins and ES2016 has a bunch of plug-ins, which would be too complicated to use. So Babel designs Preset.

Babel6 has preset- ES2015, PRESET – ES2016, etc., and they are preset with a series of plug-ins. Babel7 is further simplified to preset-env, which automatically selects a set of plug-ins to use as long as targets are specified for the target environment.

Is there any new function for Preset? No, the final conversion is done by plug-ins. But Preset simplifies the cost of using Babel for developers, so it’s also a typical facade pattern.

conclusion

The facade pattern is a particularly common pattern in the software field. When the subsystem exposed to the client is particularly complex, the complexity is isolated by adding a facade to deal with the specific subsystem, making the use of the software easier. Keep complexity well governed by isolating complexity that might otherwise become more complex to use over iterations.

HTML, CSS, Vue’s Tempalte and React’s JSX are all DSLS. The purpose of DSLS is to simplify calls, and they are typical implementations of facade mode. Template and JSX are compiled by the browser, while HTML and CSS are compiled by the browser. In addition, preset, such as Babel and ESLint, was introduced to simplify the cost of using them, otherwise the user would be exposed to complex plugin configurations.

Facade mode does not introduce new functionality implementations, just an entry point to simplify the cost of using the system. If the system is particularly complex to use, simplify it by introducing a facade (packaged as an API or DSL).