preface
Domain Specific Language (DSL) is translated into Domain Specific languages, such as SQL, JSON, and regular expressions. In contrast, GPL (General Purpose Language), translated into Chinese as a General programming Language, we are familiar with C, C++, JavaScript, Java languages, etc.
The term DSL has come up a lot in the front-end community in recent years, and this has a lot to do with the changing environment:
React, Vue, AngularModern frameworks such as presentation layer design often andDSLThere is a strong correlation, through these excellent works we can get some practical guidance.- The conversion tool chain of front-end related languages is becoming mature, such as
Babel, postcssSuch tools can help developers participate inexpensively in the language build process in the form of extensions. - Community parser generation tools such as
Jison, PEG. JsEtc., can help developers quickly implement new programming languages (generally templates and other externalDSL).
While the practice of “technology” began to flourish, it also led to some misconceptions and myths, such as the equalization of DSL and transcompile as purely technical issues, the confusion of the boundary between the internal DSL and the library (interface), and so on. DSL became an unfamiliar word that everyone was talking about.
At the same time, authoritative books such as Martin Fowler’s Domain-Specific Language tend to favor the Tao solution, but are filled with obscure cases such as “Miss Grant’s Chamber of Secrets Controller” and “Bountiful Securities Corporation” that are not well suited to domestic front-end developers. In fact, the daily work of the front end is already so intertwined with THE DSL that as a developer you don’t need to go through these rough cases to learn the DSL.
The characteristics of
The characteristics of DSLS, described in the book Domain-Specific Languages, are as I understand them:
Is a programming language or specification language that is easy for people to understand and can be interpreted and executed by computers. Compared to a general-purpose programming language, it can express limited logic. Because of limited expression, it will only be widely used in some fields.
classification
There are three main categories: external DSL, internal DSL, and language workbench.
- internal
DSLIs a specific use of a general-purpose programming language, but with a specific style. The one that’s most familiar to the front endjQueryLibrary, as well asGrunt, Glup, MochaEtc., which are based onJavaScriptLanguages develop grammatical styles in the domain they need to solve.
// jQuery
$('#my-div')
.slideDown()
.find('button')
.html('follow')
Copy the code- external
DSLIs a separate programming language or specification language, usually with its own specific syntax. In addition to the front-endJavaScriptIn fact, most of what we use is externalDSLFor exampleHTML, CSS, LESS, JSXAnd so on.
<div>
<header>title</header>
<section>content</section>
<footer>footer</footer>
</div>
Copy the code- Language workbench （
Language Workbench) is a kind of special purposeIDEThat can beDSLVisualization, and can define and build oneDSL. Front-end engineering forIDEAnd the pursuit of visualization has always been hot,VS codeAll kinds of front-end visualization tools.
The evolution of programming languages is a process of continuous abstraction, from machine language to assembly language and then to high-level languages like C or Ruby:
Machine Code -- "Assembler --" Advanced (JavaScript)
Assembly language greatly enhances the readability and maintainability of machine language by replacing machine instruction opcodes with mnemonics. But at heart it is still a low-level programming language for hardware systems such as processors and registers. The emergence of high-level language to solve this problem, really separated from the direct association of machine instruction set, the above layer of abstract statements (flow control, loop, etc.) and data structure more close to natural language and mathematical formula to complete the coding work, greatly improve the efficiency of program development.
But at the high-level level, the efficiency gains of abstraction seem to have a ceiling. Whether it is from C to Java, or the more abstract programming languages derived from various programming paradigms, they all solve general programming problems. They all have sufficient process abstraction and data abstraction, resulting in a large number of concepts, and thus affect the programming efficiency.
However, in some specialized fields, task processing does not need so many language features. DSL is a breaking solution generated in this contradiction. It is a language tool for solving specific tasks, such as document compilation with Markdown, string matching with RegExp, task control with make, gradle, etc. Data lookup has SQL, Web style coding has CSS, and so on. Its essence is the same as many of our software engineering problems, by limiting the boundaries of the problem domain, so as to lock down the complexity and improve the efficiency of programming.
UI DSL development
The Web front-end is not only HTML/CSS/JS, in fact, there are Silverlight, Flash, ActiveX, etc., but the Internet chooses HTML/CSS/JS for various reasons. JS is not designed to build complex UI, so for the increasingly complex Web front-end, front-end UI DSL is also developing step by step, HTML/CSS/JS specifications are constantly improving and iterating, the industry is not satisfied with the current standard and continuous expansion, CSS, Less/Sass, JS/JSX, Vue, and Angular all have their own component and Template implementations that use translators to run the equivalent code.
By extending or combining the creation of a new UI DSL based on an existing language, the acceptance of front-end developers may be high, but the practical reasons can only be more complex, with various standard specification committees, browser vendors, front-end Runtime, and so on. In order to improve the interactive experience and combine the respective advantages of Native and WebView, UI DSL tends to be web-side grammar and friendly to Web front-end developers.
Compared to the Web, mobile has seen a cliff upgrade due to its native unique UI DSL. Examples include Object-C to Swift UI, Kotlin Anko for Android, Dart for cross-platform Flutter. Behind each language is the support of the big manufacturers, the original intention is to release a better UI building language, everyone’s trend is UI as Code.
UI as Code
In essence, the mobile end and the Web end are slightly different, but both front-end and highly consistent problem areas. In my opinion, this Code means that there is a general programming language, and then based on this programming language to create an internal DSL to build the UI, logic and UI programming in the same language, more efficient and reduce the burden of developers.
The Web front end has a similar trend. Various CSS in JS schemes have emerged, with JS/HTML being expanded to JSX, albeit with a strong HTML/CSS color. With the emergence of many mature component framework libraries, in the development of the background, in addition to JS, most of the time almost only assembly components and some simple layout, has not written a lot of CSS and direct manipulation of DOM. The phrase “programming is designing DSLS for your application” is that you use components to build an internal DSLS (encapsulating components, methods) for your application, sacrificing some of the versatility and flexibility to improve development efficiency.
Facebook can build JSX, Microsoft can create TS, China also has Vue, believe that the front-end language level of the greater opportunity is to abstract a better DSL.
Visual platform
The front-end system/visualization platform is difficult, with high investment risks and huge potential returns. Large manufacturers are investing in the research and development of a more versatile visual building platform, a wider range of application; Small manufacturers will be targeted at specific business to develop and build the system, the difficulty is a little lower and quick. If the scope is limited to the above two, in an appropriate business domain, the R & D fully communicates with business domain experts, invests in developing relevant models and DSLS, aided by visualization, and strikes a balance between flexibility and efficiency, the domain productivity can be greatly improved.
We often try to create drag-and-configure visual scaffolding systems to solve a variety of different businesses. Without the silver bullet, the complexity of the system doesn’t go away, it just shifts, and this is where the COBOL fallacy comes in: “Programming languages are hard because they don’t look like the languages we communicate with, and programming languages that look like the languages we use would be much easier.” The front end was hard, so we made it a drag-and-drop visual platform that didn’t require front-end development.”
Antd is equivalent to building A DSL based on JSX, in the field of middle and background front-end development, through the interactive presentation of logic based on abstraction, at the expense of very little scalability, versatility and flexibility to a certain extent.
One of the difficulties with visual scaffolding systems is that when visual scaffolding fails to meet certain requirements, developers may change the code to meet the requirements and then not be able to move on to the platform. Interoperability between code and visual constructs is a challenge. If, on the other hand, visual constructs translate into code, not directly HTML/CSS/JS, but a new internal DSL or external DSL, the model behind this DSL has a specific design in terms of flexibility and code/visual interaction, code modification, as long as it conforms to the specification of this DSL, Can be converted into a visual platform. This goes back to the discussion above, no silver bullet, UI as Code as the trend, sacrifice in one area, narrow the field, in exchange for efficiency.
Problems arising
The problem with blindly creating DSLS, whether internal or external, is that the burden of learning and understanding increases because using multiple languages is much more complex than using one, and development can be more complex and bug-prone than it is efficient.
However, the complexity of the program will not disappear, no DSL, will also need to use different libraries, good library design is essential, “library design is language design”. However, a good DSL should also be easy to understand and use, reducing the cost of learning.
conclusion
When people get caught up in a lot of business development, it’s important to jump out of the details and look at some abstract and theoretical things for inspiration. With the acceleration of network 5G, 6G, or the rapid development of AI, AR/VR, the change and innovation of front end interaction mode, the front end can explore more and more things.
Article Source:
zhuanlan.zhihu.com/p/107947462
zhuanlan.zhihu.com/p/179488071