Is it equivalent to repeating wheels without using a framework?

Scripture

original

The author is authorized and translated and shared by INFOQ. Please indicate the author and translator’s information and source for reprinting.

In the past, it was Angular, and then React, now Vue.js … Others like Ember, Backbone or Knockout almost disappeared. Some standards, such as web components, are rarely used. It seems that some new frameworks are released every year, such as SVELTE, Aurelia, and each framework has corresponding objects on the server side (those corresponding to those frames, nextjs, or nuxt, SAPPER corresponding to SVELTE, etc.). Non -JavaScript Web frameworks (such as Django, Spring, Laravel, Rails, etc.) not to be said. There are even quasar, solidjs above the framework, STENCIL, MITOSIS), and NCDP (NO-Code Development Platform).

This diversity makes developers and technical selection decision makers who want to know which technology is worth learning.

Some articles that compare these frameworks often appear on the Internet, as if helping us to solve this confusion. But most authors are usually biased because they may “use this framework”, but “only try some other frameworks.” The authors with a lower prejudice always have the conclusion (depending on the specific situation “conclusion (depending on performance, tools, support, community, etc.), which is actually a non -negative conclusion.

Even if some benchmark tests are compared with different frameworks based on the same application, it is difficult to obtain real results, because this benchmark test is limited to the tested application (such as an application to the process).

The framework looks like religion (or politics): Each framework pretend to provide a solution for developers, but each one is different. Each of them claims to provide the best prospects for applications, but the true dispute about which real name is. Each framework requires you to follow specific rules. There may be similarities between them, but it is always difficult to convert from one framework to another.

Now, let’s take a look at the “atheist” method of the frame: not using the framework.

Where does it start?

I have more than 25 years of professional software development experience. In addition, this article will also be based on the experience of building a real pure JS web application (front and back -end).

Why not use the framework?

In fact, this idea is still new. As early as 2017, Adrian Holovaty, co -founder of Django Web framework, talked about his framework “fatigue” and why he left Django to build his own pure JS project.

Some people may ask, why would anyone want to develop a web application without using the framework? Why not develop on the basis of the results of other people spend years and energy? Or because everyone wants to build a customized framework because of Nih (Not Invented Here)?

Developers are not more inclined to find trouble than ordinary people. In fact, they may be lazy than anyone: they only want to write less code (so they can make less mistakes) and want to automate (to avoid human error)……

But they want to be agile, which can solve problems easily and quickly.

Although “fast” seems to be something promised by the framework (build scaffolding for you and increase reliability), it is not free: they want you to sign the contract, agree to pay the “tax” fee, and put your code into ” The saying of “tax and lone well” comes from the head of the IBM Carbon system design team Akira Sud ).

Frame tax

The use of frameworks requires the cost:

Follow their API rules so that they can provide you with services. This is the way of working: your code must adhere to certain rules, including more or less model code. What you think every day is not “how to do this”, but “how to make the framework (or not do).” If you avoid these constraints, the risk will be borne by yourself: if you bypassed the frame by directly calling the underlying API, do not expect them to understand your intentions, and do not expect their behavior to be consistent. Therefore, the framework will make you “focus on business” is a false commitment: in fact, you don’t worry about the framework.

If you want the following things, you have to be forced to upgrade:

1) If you want a new feature (even if you don’t need all the functions, you must upgrade everything);

2) Want to repair a bug;

3) Do not want to lose the support of the framework (with the release of the new version, the version you depend on your application will be abandoned).

If the BUG appears in the framework, but there is no clear plan repair date, this will make you feel very frustrated (it may also make the project face risks). The framework library (such as small components) or plug -in provided by a third party is no exception. If you have always used the old version, they will be worse and worse than the compatibility of your application. For frame maintenancers, maintenance of backwardness has become a very troublesome thing. They found that the tools for developing automatic upgrade code (Angular’s NG-Update, native upgrade assistant of React, and Facebook’s JSCODESSHIFT, etc.) will be more favorable.

You need to learn how to use them (what they can do or not, their concepts, APIs, ecosystems, and tools), including understanding the changes that may occur in the new version. If you choose the most popular framework, this may be easier, but you can’t understand all aspects of a framework. In addition, the hype will never stop: If you decide to use another framework in one new application (or worse, migrate from one framework to another), then all your investment on the old frame will be on the old framework will be Zero. This is why many enterprise projects lack vitality, even if each project may be different from the previous project. The late David Wheler once said: “Maintaining compatibility means to repeat the mistakes of others.”

Entry control to the framework, which is a compromise of the frame defect: you may not be able to do anything you want to do (or prevent the framework from doing what you do not want them to do) or you may not get what you want (because because because because of the fact that you don’t want to do) Extra layers, universality, larger code volume, or backward compatibility needs).

Skills are scattered. Many developers either don’t know much about the underlying API (because they always use the framework provided by the framework), or live in the past (only knowing outdated knowledge and the latest improvement and functions). “Tools” often lead to excessive design, building complex solutions for simple problems, and the knowledge of building simple solutions is gradually scattered. Under the guidance of the guide, we lost (or did not obtain) good software design (principles, models) culture, and lost (or did not obtain) to build important projects. Just like the CSS framework (Bootstrap, Tailwind, etc.) users lack CSS skills, users of the Web framework are destined to lack modern Web API and software design experience.

Once you put the money into the frame, it is difficult to take it out.

Frame alone

In addition to paying the “tax” fee to obtain the benefits of the framework, if the framework is not standardized, they will bring another problem.

Because they force you to follow the framework rules -and each rule is different -this means that your application will bind it with a proprietary ecosystem, that is, using a proprietary API (and its upgrade process ) Lock your application code. This is an adventure betting for your project, as they suggest:

No portability: migrating the code to another framework (or a new version with major changes, or even not using the framework) will be very expensive, including the cost of re -training may be required;

Your code does not operate when running or other framework components you want to use: Due to different rules, it is difficult to achieve interoperability between most frameworks.

Of course, at the beginning of the project, you can choose the most popular framework. For a short -term project, this may be acceptable, but it is not for long -term projects.

Come and go. Since 2018, one to 3 new frameworks have replaced the old frame every year.

However, the standard framework does not exist. On the web platform (that is, the browser framework), using standard Web API can reduce your investment risk because they can run on most browsers. Even if not all the browsers are supported, they can still be made up by Polyfill.

For example, web components can be transplanted (almost in all browsers) and interoperability (can be used by any code, including proprietary framework) because they can be packaged into any HTML element. Not only have better performance, their running (custom elements, shadow DOM, HTML templates) are also running as part of the browser, so they are already there (no need to download), and they are native.

Rarely developers try to escape from the frame.

Is the framework essentially not good?

If you create your own framework for the implementation of your application logic, you cannot say that the framework is not good: Any application needs to implement its own business rules.

If the following situations are in line, the framework is good:

It is unique to the application: Any application will eventually design its own “business” framework.

Become a standard, for example, the web platform is a standard web framework, and the final components that the web component framework (LIT, STENCIL, SKATEJS, etc.) meet this standard.

Add some unique values ​​lacking in other solutions (including other frameworks). For this situation, you have almost no choice. These added value proves that the hidden lock cost is reasonable. For example, a framework specific to the operating system follows the standard of the operating system. There is no other way to obtain an application or extension that can meet the needs.

Used to build non -critical (short -term, low -quality expectations, and can accept “taxes and fees” and “lone wells”) applications. For example, use Bootstrap to build prototypes, MVP or internal tools.

Go to frame -based goals

Simply put, the goal of avoiding the use of frameworks to build applications is:

Maximize flexibility by avoiding the “one -size -fits -all” constraints of the framework. In addition, remove the rules’ constraints and enhance the creativity of the application. Most of the web applications developed by Bootstrap belong to this category, because it is difficult for them to get rid of pre -defined components and styles, and eventually it will be difficult to think from other perspectives.

Try to minimize the dependence on excessive hype. Only not locked by the framework can avoid transplantability and interoperability problems.

Only the finest granularity operation (for example, the refresh cycle of the framework), and reducing the dependencies, using only some necessary lightweight libraries to maximize the performance.

Of course, our goal cannot be “re -inventing the wheels.” Let’s take a look at what to do.

Outside the framework

So, how to develop applications without a framework?

First of all, we must clarify an anti -goal: Do not confuse the “do not build a framework for building” with “replacement framework”. The framework is a general technology solution for custody of any application, so their goals are not your application, but all applications. On the contrary, leaving the framework can make you more focused on your application.

Developing applications without using a framework does not mean to re -realize the framework.

To evaluate the difficulty of building an application without using the framework, we must understand that it is not as difficult as building a framework, because the following is not our goal:

Construct a proprietary component model (the container to implement a life cycle of a specific component);

Build a proprietary plug -in or extension system;

Build a strange template grammar (JSX, Angular HTML, etc.);

Realize universal optimization (change detection, virtual DOM);

Tools particularly in the framework (debugging extension, UI builder, version migration tool).

Therefore, building an ordinary application is not a difficult task of “re -inventing wheels”, because this “wheel” is mainly about API/contracts, implementation, general engines and related optimization, debugging capabilities, etc. Abandoning the general goal and focusing on the application of the application means that you can get rid of most of the goals, and this is the real “focusing on your application”.

So, how should we design and realize an ordinary application? Because most applications are built by frameworks, if there are no these familiar tools, it is really difficult to design a method to achieve similar results. you must:

Change your thoughts: Do not use services that are specific to the framework. For an ordinary application, you may not need these services. You don’t need to change the detection, just update the DOM directly …

Use other technologies to replace schemes to perform common tasks of the original use of framework (update DOM, delay loading, etc.).

Some authors, such as Jeremy Likness or Chris Ferdinandi, also mentioned this topic. However, according to the definition, any ordinary application can choose (or not choose) to use one of the technologies, depending on the needs. For example, the author of MeetSpace only needs to use the standard API.

Next, let’s take a look at some common “solution”.

standard

Standard API is a “good framework” because they:

Paimable: They are available anywhere. If it is not available, it can be implemented by polyfill.

Mutual operation: They can interact with other standards and be used in proprietary code.

Long -term existence: designed by multiple industries, not just one. They are designed well, and they will always exist once they are released, and their risks are small.

In most cases, it is available in the browser to avoid the download process. In some cases, you may need to download Polyfill. However, unlike the proprietary framework (destined to become increasingly popular), their usability will become higher and higher (the necessity of downloading gradually).

When choosing a programming language, we must focus on the standards. After years of development, JavaScript also includes the characteristics that appear in other programming languages, such as Class keywords and providing limited types of examination support through JSDOC annotations (such as @Type).

Many programming languages ​​can be compiled into JavaScript: TypeScript, Coffeescript, ELM, Kotlin, Scala.js, HAXE, DART, RUST, Flow, etc. They all add different values ​​to your code (type inspection, additional abstraction, grammar candy). Should ordinary applications be used? In order to answer this question, let’s see if they have the same shortcomings as the framework:

Following grammar: Most programming languages ​​are forced to do so (Coffeescript, ELM, Kotlin, etc.). But it should be noted that they are TypeScript, Flow, and you can still write some parts of your choice with pure JavaScript.

If you use very old programming language (including JavaScript), you need to upgrade, but the upgrade frequency is much lower than the framework.

You need to learn their grammar. However, you can gradually learn the superpatient programming language step by step, because some parts of your code can continue to use traditional JS.

For non -over -set programming languages, discrete skills are indeed a risk. Because their compilation is universal, it may not be the best, and you may not realize this. Maybe you can use the simpler and efficient JS code to complete the same operation.

不用任何框架开发 Web 应用程序,可能吗?

It is necessary to compromise the disadvantages because we cannot change the process of translation to js (or use tsconfig.json to make a little customization) or compile into Webassembly. Some languages ​​may also ignore some concepts of JS.

It has transplantability, because the code can usually be translated to ES5 (but sometimes you have to compromise, even if you want to translate to ES6). Webassembly is new, all modern browsers support it.

Provide interoperability with other JS code. For example, TypeScript can be configured to support JS.

In an ordinary application, we must use non -overlap languages ​​carefully because they have more or less implicit constraints. TypeScript (TypeScript, Flow) to minimize these constraints by avoiding “either or none”, we should use them where they can bring value.

It should be noted that the language layer constructed above JavaScript means that another layer of complexity is added to our tool chain, which may cause failure for some reasons (see below). In addition, after compilation or translation, the benefits of the development phase will also disappear (usually do not enforce the type or visible constraint inspection at runtime).

Development library

Based on the assumption of “rewriting framework”, ordinary JS applications should not use the conclusion of the development library. This is completely wrong. “Re -invent the wheels”, that is, rewriting everything from scratch is not a wise goal. Our goal is to eliminate the hidden constraints in the framework (not the development library), please do not confuse it with the dogma of “writing everything”.

Therefore, if you can’t write certain code yourself (probably because there is no time, or because you need too much professional knowledge), it is not wrong to use the development library. You only need to care:

Modification: If you only need a small part of the function, you must avoid relying on the entire big development library;

Avoid redundancy: only the development library is used without standards, and the standard development library is given priority;

Avoid locking: Do not use the API of the development library directly, but pack them in the application API.

It should be noted that do not be confused by those claims that they are not frameworks or articles (because they are “not clearly defined” into a framework, or there is no definition of a “complete application”): as long as they are implicitly implied, they are just they are. frame.

model

Holovaty said that it is not enough to build software for the application mode (without using a framework).

Model is a well -known thing that is not specific to a certain development process. They are self -documentation because they can be quickly identified by experienced developers.

不用任何框架开发 Web 应用程序,可能吗?

Only a few examples here:

Model, view and controller mode (MVC);

Factory model of creating objects based on the configuration;

Simplify the observer mode of reactive programming;

Used to traverse the iterator mode of the collection;

The proxy mode for delay loading and safety inspection;

The command mode for packaging operation (maybe based on the context).

There are many such models: you can use them freely to meet your needs. If a model provides a typical solution for a typical problem of your application, you must use it. More broadly, anything that conforms to the Solid principle and good internal agglomeration is conducive to the flexibility and maintenance of the application.

不用任何框架开发 Web 应用程序,可能吗?

Update view

When interviewing developers, when they are asked about what they are worried about when they build an ordinary application, most of them will answer: to achieve complex model change detection and subsequent “view” update. This is a typical “tool rule” effect. It will let you think about problems according to the thinking of the framework, but in fact, some of your simple needs do not need to use the framework:

“View” is just the DOM element. Of course you can abstract them (you should do this), but in the end they are just abstract.

Update them is just the problem of calling ViewElement.replacechild (NewContent). There is no need to update a larger range of DOM, nor need to be redemption or rolling. There are many ways to update the DOM. You can insert text or operate the actual DOM object. Just choose one that suits you.

In ordinary applications, it is usually unnecessary when “testing” is usually needed. Because in most cases, you only know what you need to update after one event, and then you can execute this command directly. Of course, in some cases, you may need to update generally through reversal dependence and notifications (see below).

template

Another feature that developers do not want to lack are the HTML fragments with dynamic parts or listeners.

First of all, the DOM API (such as document.createElement (“Button”) is not so difficult, and it is actually more powerful than any template language, because you can visit these API comprehensively. The long HTML fragment may be boring. If they are really long, they can be split into more fine -grained components.

However, treating these elements as templates can indeed improve readability. So how to manage them? There are many ways here:

Now you can use HTML templates in the browser (in fact it can be from 2017). They provide the ability to construct a reusable HTML fragment. This is actually part of the web component.

JavaScript supports template face volume from ES6 (2015), and you can easily embed the value into the string. You can embed the original type (number, string, including other HTML code, etc.), but you cannot embed more complicated elements, such as registering the DOM element of the listener.

We can embed the complex values ​​(such as DOM nodes) into the template with the help of the tag templates. Observablehq has designed a very convenient tool that can be used to write a code such as html`

$ {Stringornode}

, or to achieve more complex templates, such as html`

    $ {items.map ( item => `

  • $ {item.title}
  • }

.

What should I do if the conditions or cyclic statements in the template? Not to mention that this may never be a good idea (in the UI should not include logic). You can (should also) only use JS to achieve logic, and then use the above technology to insert the result into the template.

event

Now, we have a basic template, so how to bind the event to the DOM node? There are also several options here:

The HTML event processor code (

Event processor API (Button.addeventListener (“Click”, MyClickhandler) can be used to all nodes created through DOM API or HTML tag templates.

So what should I do if customized or business events? What should I do if I need some events triggered by an application of the application? There are also many ways to deal with here:

Custom event: You can create your own event by extending EventTarget, and distribute or monitor them, just like the “standard” event.

In theory, using Eventedemitter is also a way (existing in Node, which is inventory in the browser), but it is rarely used.

Observer mode: You can build your own observer, or you can consider using RXJS, which is the standard in this area. You only need to build a subject and notify all subscribers when the incident occurs, so that subscribers respond to the event.

Component

Although the development of ordinary applications is different from the complex infrastructure (that is, containers used to host components), if some things appear many times in the system, they are designed to reuse components (have nothing to do with context). It is a good idea. No matter what kind of technology you use, whether it is business or technology, a certain degree of granular abstraction is still useful: data and rules related to the same business concepts are encapsulated into a reusable object, or the construction can be built in multiple applications multiple. The localized small components of localized localization are always a good idea.

There are many methods for creating components, depending on their needs. As early as 2017, MEV-RAEL proposed a lot of skills to handle the status, custom attributes and views of the JavaScript component. Of course, we should not be restricted by the technologies recommended by others, but we must first consider our own needs, and then choose the appropriate technology.

Except for standard small components (usually standard web components), any component should be able to::

Spread logic and views (usually use the MVC mode). Mixing them together usually causes the code to not be easy to maintain, and reduce flexibility (for example, if you want to display a record in the form of details or tables at the same time, your recordComponent only needs to use DetailRecordView or RowrecordView).

不用任何框架开发 Web 应用程序,可能吗?

Behavior or view of parameterized components.

Some events occurred in the subscriber component by trigger an event (usually after user interaction).

Synchronous: If some events occur, components should be able to re -draw. This reaction development library (such as RXJS) can be easily achieved.

In any case, no matter what design strategy you choose, your component (or more specifically, its related “view”) must be able to provide some HTML rendering results. You can use a string containing HTML code, but HTMLELEMENT (or Element) is usually a better choice (high readability, directly updated, you can bind event processors), and the performance is better (no analysis).

In addition, you may want to use external components from third parties. Due to the high degree of popularity of the proprietary framework, they can use the database and group developed by the community to a greater extent. Most of them are actually not much different from the characteristics of pure JS (such as jquery), but the problem is that they lack interoperability, so in the end you will find that what you need is actually pure JS or web components.

{Welcomemodule} = await import (“./ Welcomes/Moduleimpl”)
module = new welcomemodule ()

interface welcomesSages {
Title: String
Greetings (user: string, unreadcount: number): string
}
Class WelcomeMessage_en Implements WelcomesSage {
Title = “Welcom!”,
Greetings = (user, unreadcount) => “ “ welcome $ {user}, you have $ {unreadcount} unread messages.““`
}
Class WelcomeMessage_fr Implements WelcomesSage {
Title = “Bienvenue!”,
Greetings = (user, unreadcount) => “ Bienvenue $ {user}, vous Avez $ {unreadcount} nouveaux message
}

Fortunately, such a library does exist, such as Vanilla JS Toolkit, although it may not be very common. In terms of web components, webcomponents.org lists more than 2,000 elements. There are even ordinary web components, but they are not related to what we have to discuss (more about lightweight implementation, not interoperability).

routing

Management routes in SPA need to use Web History API. Although this is not complicated, you may still want to entrust it to a simple routing library, such as Navigo.

All you have to do is to replace another DOM element with one DOM element (using the replacechild () or replacewith () method).

Delay load

Loading JavaScript code on demand is a question that any web application needs to be considered. You must not want to load all application code in order to display a login interface.

As early as 2009, before the Web framework appeared, James Burke (DOJO developer) released Requirejs to solve this problem. Since then, more technologies have appeared with the emergence of modularity. Starting from ES6 (2015), we can dynamically load the code. It is possible in Node, and in the browser:

Copy code

So how to split the module into a separate file? The package (such as Webpack) can do these tasks for you.

It should be noted that you should use only constants in the import path, otherwise the packager cannot guess what you want to load, and all possible files will be packaged in one file. For example, AWAIT Import (`./welcome/$ {modulename}`) will pack everything into the specified directory, because the packager does not know what the variable moduleename will be at runtime.

不用任何框架开发 Web 应用程序,可能吗?

Native application

More and more frameworks provide a method of running, migration or compilation of applications for native platforms (such as React Native) to deploy them as independent applications to Android or iOS mobile systems.

In addition to considering the development of real native applications, the more common solution is to embed Web applications into native containers, such as the previous PhoneGap (now stopped maintenance) or Apache Cordova. Angular also supports ordinary applications), or native web application packagers like Electron, or Electron’s lightweight successor TAURI.

Server rendering

Many frameworks running in front and back -end are similar, which is easier to achieve the server -side rendering (SSR) that is friendly to SEO.

This may be a cool and convenient feature, but it should be noted that it may also lead to the server lock. Therefore, you need to consider its impact on projects, infrastructure, client technology and other aspects before introducing frameworks to the application.

Fortunately, you can also achieve this feature without using a framework.

Rendering from the server

The use of ordinary implementation solutions looks simple at the beginning: Isn’t it just returning HTML? Yes, you already have ready -made components, but::

You also need a server -side DOM API, because by default, the server does not provide DOM API (JSDOM, which is maintained by Domenic Denicola or the optimized Happy Dom is a good choice).

Your rendering component cannot assume that the DOM is on the client or server, that is, do not use the global DOM, because on the server side, each request requires a DOM. To do this, you need to select the DOM object from the context of (client or server) application, such as Node, HTMLELEMENT, NodeFilter), instead of directly obtaining.

There are many ways to share rendering components between clients and server applications. For example, it is published in the package storage repository, but the most flexible thing is to allow the application package to quote the module in Monorepo.

Add interaction

However, once HTML elements are converted into string, all event processors set on these elements are lost. In order to restore interaction, you need some “hydration” steps, that is, inject scripts to allow them to perform on the client. The framework is difficult to achieve this because of its universality. Take the shadow DOM, they constantly try to improve the algorithm, hoping to do this in the smartest way, but if we reduce the problem at the application level, we will become much simpler.

Of course, doing this in ordinary server applications also means that JS scripts need to be injected into the response message (by reference or inner couplet, it depends on what kind of “progressive” you want, such as bringing Web components in the office The required code is embedded in the HTML response and allows them to execute on the client).

Ordinary solutions allow you to control where, when, and what are added: you can only send HTML first, then load basic interactive JavaScript, and then load more (depending on the user’s operation), and so on.

不用任何框架开发 Web 应用程序,可能吗?

This is simpler than anything mentioned in this article, because they are application code, not universal framework code.

globalization

Over the years, internationalization issues have been treated through library (eventually integrated into the framework). It is easy to integrate these libraries by yourself, but you can also choose to implement one yourself, because your realization can support the simpler and more effective news type compared to the general library.

It’s that simple:

It provides you here:

Type check: Each message has a static type (and a few translations), so the IDE can check whether you have used effective message attributes and provide you with automatic completion function.

Translation integrity check: It cannot be compiled before providing all languages ​​with all languages.

All you need to do is (loading and) instantiated messages related to the user language environment. The general library does not provide this type of message -specific message.

tool

If you want to get rid of the dependence on the strong constraint software technology stack, then you are likely to get rid of the dependence on the tool: you don’t want to go forward Essence You don’t want to be troubled by a problem that you can’t solve (or it takes hours or days to solve) (especially if you use the recent version, and they have not been fully tested by adequate combat).

Having said that, it is still difficult for you to avoid using these tools. In most cases, your product code must be packed in some way, including narrowing volume, confusion, code splitting, shaking tree optimization, delay loading, including style, etc. There is no doubt that existing packaging tools such as Webpack, Parcel, ESBUILD or VITE will do better than you.

All you can do is:

不用任何框架开发 Web 应用程序,可能吗?

Use as little translation as much as possible. For example, using TypeScript may be a good thing, but it will bring extra complexity. Your tool chain must have corresponding tools to process this complexity. The same is true for CSS, especially the latest version, which is not worthy of your use of a pre -processor (such as SASS) to deal with them.

Use as little tools as much as possible. The more tools you use, the more likely it is to have problems or cannot meet your needs.

If you really need to use tools, please choose the most popular tools, because they are more likely to meet your needs after actual combat testing (so you will not fall into the dilemma of “changing demand or replacement tools”). Using the latest packaging tools prematurely may save you a few seconds of construction time, but these times are probably not enough to understand tool documents, process bugs, or process problems caused by lack of support.

the biggest challenge

After all, the biggest challenge is not technical, but about people:

You have to get out of the comfort zone. I hope you will be able to understand that using ordinary solutions is not so difficult, the complexity of the framework is much greater than the benefits they bring. In addition, you may see more new API (Webcomponents, ES6 modules, proxy, MutationObServer …), and web is more modern and more powerful than you think.

As for others, you can try to convince them. They may not be willing to do so, because no one is willing to open a journey they have never tried.

Others may tell you:

“You want to develop your own framework”: No, we are developing applications, not a framework.

“You have to write more code”: Maybe, but maybe not too much (depending on how many development libraries are used), because this needs to be compared with the model code of the framework. But no matter what, the code that needs to be loaded is less.

“You will continue to re -invent the wheels”: Of course not. Do not use the framework to not follow their predetermined rules (configuration, life cycle management, refresh mechanism, etc.), but we have not forgotten the DRY principle, we can still (and should) use a third -party library with actual combat testing.

“You need to write more code for each function”: No, you can follow your own rules instead of using frame model code.

“No document can be read”: There will be no framework documents (because there is no framework at all), but you still need to write application documents. It is worth mentioning that the use mode helps you automatically document your software design. You only need to care about the code document of the application, and if you use one more framework, you need to read one more document.

“There will be no constraints or models to guide developers”: No, if you really need to be restrained, there is nothing to stop you (you only need to define the contract).

“You will miss performance improvement.” For example, the virtual DOM that was once speculated (now the challenge, including challenges from Sellte or Aurelia framework): No, because these “performance improvement” is the framework itself (for generality) , Not the application. Instead, the general framework is more likely to miss some performance improvement that can be achieved through custom code.

You encounter this problem because you do not use the framework. Each problem (including vulnerabilities, delay, recruitment, etc.) is blamed because of no use of a framework. Because the experience of most developers is that everything that runs normally uses a framework, and in default, it will be considered risky without using them. Once a problem occurs, whether or not it is related to the framework, this assumption will be considered correct. They forgot to encounter similar problems when using the framework.

“We can’t find a developer”: They will say it is difficult to find developers who can write pure JS code. This sentence is right and wrong. Because many developers (and managers) will find that they are more accustomed to using the framework. If they have never used or do not understand the basic web API, they may be afraid of building a web application from scratch. However, if you want to develop high -quality applications, you should not find this type of developer. Of course, it is easy to find a React developer now, but you need not just the developer of the React, but the excellent developer.

“You can’t get the same code quality as the frame.” Of course, frameworks or development libraries are usually written by experienced developers in the industry. However, the code of the framework is mainly related to the specific activity of the framework (component life cycle, general refresh mechanism, optimization, tools, etc.), which has nothing to do with your application. In addition, even if you use the framework, you may still make a bad design and write a bad code. The quality of the application always depends more on the quality of the team, not because of the lack of frameworks.

Copy code

“You can’t get the same performance as the framework”: No, we can get better performance. The industry’s claim that the framework that can “improve performance” is not discussed here because they may be mainly used to solve the performance defects of the universal solution of the framework (such as virtual DOM).

There is no doubt that the best performance framework is those frames with less layers above ordinary code. The “optimization” of the framework is more to make up for the overhead of the framework itself.

in conclusion

Building a web application without using a framework does not mean to build a framework by itself. It is about developing applications without using a general engine. The purpose is:

Avoid dispersion control and implicit constraints (locking, upgrade costs, etc.);

Optimization (performance, volume, design).

That is to write only code (business and technology) specific to the application, including the use of development libraries. The framework you should really pay attention to is your own framework, that is, the framework specific to the application. This is the real “focusing on business” and the most effective.

This is not as difficult as you think, especially with the blessing of modern standards (mainstream browsers can support new features through Polyfill if necessary).

Original link:

https://javarome.Medium.com/design-noframework-bbc00a02d9b3