As a front end, you’ve probably developed the Electron desktop app, applets, web apps in browsers, cross-engine apps like React Native, node.js tools or services, all of which are different JS runtime. Development is all based on the front-end technology.
Faced with so many niches, as a front-end engineer, have you ever wondered: What should I learn from so many technologies? Is there anything essential about them?
In fact, all of these technologies, all of the code you’ve ever written, fall into two categories: APIS and abstractions.
api
Different platforms provide different apis and support different capabilities:
Browsers provide DOM apis, CSS rendering support, audio and video, WebGL, and other related apis, which are the basis for developing front-end applications.
Node.js provides apis for operating system capabilities such as processes, threads, networks, files, etc. These apis are the basis for developing toolchains or back-end applications.
React Native and other cross-end engines support CSS rendering and provide apis for device capabilities, such as camera, flash, sensor, GPS, etc., which are the basis of our mobile app development.
Electron integrates Chromium and Node.js, as well as providing desktop-specific apis.
In addition to supporting CSS rendering, applets also provide apis that host app capabilities.
In addition, there are many runtime plug-ins, such as VScode, Sketch, etc., which have their own apis to use.
Different JS Runtime provides different apis for the upper layer application, which is the foundation of application development and the boundary of application development capability.
abstract
Based on the API provided by the Runtime, we can complete the application function development, but complex scenarios tend to do some abstraction.
For example, the front-end application on the browser is mainly to render data through DOM API and CSS, and do some interaction, so we have abstracted the data-driven front-end framework, abstracted the concepts of components, state, data flow, and so on. The different requirements can then be abstracted into different components, states.
After layers of abstraction, the code is easier to maintain and less costly when developing complex front-end applications.
For example, we can realize Web Server based on NODE.js APIS such as FS, NET and HTTP. However, for complex enterprise-level applications, we can abstract MVC through the back-end framework to abstract concepts such as controller, service, model and view. The back-end code then abstracts the requirements into different controllers and services.
After MVC abstraction, the layering of back-end applications is clearer and easier to maintain and extend.
Complex applications require some abstraction from the API. We tend to make one layer of abstraction with the framework, and then another layer of abstraction ourselves, so that the code is more maintainable and extensible after each layer of abstraction. This is called architecture.
How do I dive into APIS and abstractions
api
Apis encapsulate the capabilities of an operating system or different domains.
For example, Node.js processes, threads, files, and network apis are the encapsulation of operating system capabilities. If you want to go deep into them, you need to learn some principles of the operating system.
Webgl and AUDIO and video apis encapsulate the capabilities of graphics and audio and video, respectively. If you want to go deeper into them, you need to learn some principles of these fields.
Personally, I think we just need to know what the API provides, and there’s no need to get too deep into how the API works.
abstract
Abstract is a programming paradigm based on programming language, designed for different purposes.
Javascript provides object-oriented, functional programming paradigms, so you can abstract based on objects, use various object-oriented design patterns, or use functional ones. This is the basis of abstraction.
Abstraction is done according to different goals.
The front-end domain is primarily about separating DOM operations from data and dividing pages by functionality, so MVVM and componentization abstractions are made based on these goals.
The back-end domain is mainly to do layering, decoupling, etc., so IOC, MVC and other abstractions are made.
As you can see, abstractions are based on paradigms of programming languages, and design according to requirements. A good framework must be an abstraction that meets certain requirements for managing code.
To improve abstract and architectural design skills, study object-oriented design patterns or functional programming paradigms. Examine how various frameworks are abstracted.
conclusion
Different platforms provide different apis, which are the foundation and boundary of application development. Complex applications often need to perform layers of abstraction based on API. Generally, they use a framework to make one layer of abstraction and then make another layer of abstraction by themselves. The goal is to make code division clearer and improve maintainability and extensibility.
In fact, all the code we’ve ever written can be divided into API and abstraction.
To get deep into the principles of API, you need to get deep into the operating system and the domain knowledge. To improve abstraction, learn programming paradigms such as object-oriented design patterns or functional ones.
No matter what platform you’re working on today, you’re going to have to learn the API first, and then you’re going to have to understand the abstractions: how the framework abstracts, and what the abstractions are.
Apis guarantee lower limits, and abstractions can raise upper limits. And the ability to abstract, or build, is transferable and is one of the most important skills a programmer has.