• The Small Websites Are Dying
  • Originally written by Seva Zaikov
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: EmilyQiRabbit
  • Proofreader: WZnonstop, Xionglong58

Websites are getting bigger and JavaScript is getting faster and faster, and in order to keep up, you need to translate your code from the latest version to browser-compatible mode (which is complicated, but Babel can handle it). You can also write web pages in other languages, such as typescript. There have been many attempts at typescript before (1,2,3, and so on), but one important fact is that typescript is recommended for widespread use in scenarios that deal specifically with large applications.

The single page Application (SPA) road

Historically, small pages have consisted of static HTML and bits and pieces of JavaScript. I bet a lot of traditional server-side rendering applications (such as Django or Ruby on Rails) still do this, but it’s not cool anymore, so if anyone still uses it, it’s probably just an API. These pages (whether static or server-side rendered) have a lot of AD hoc scripts that look like a mess. Maintenance and testing are more of a nightmare, and the code is either very long or connected in some strange way.

When such scripts into a single page of the application, it’s a good thing — for now, at least we application is part of the maintainable, using the appropriate module is introduced, as well as many allows developers to handle complex interfaces, routing, panel data sharing, across applications and even the entire site (such as open source components) UI elements reuse of framework. However, this post isn’t about them — I’ve already teased that spAs are now the default option for all projects; This article is about small websites.

JQuery rise and fall of

Until then, jQuery has dominated, with a huge ecosystem of plugins, sliding Windows, image displays, rich dynamic effects, and more. At the same time, it is easy to integrate, usually just initialize some plug-ins with some parameters (even default values) and provide element ids. While other content is usually specified in tags (or requires specific markup rules), HTML, as a declarative language, is fully cognisant of the specified content. In fact, jQuery is so widely used that many people wonder why jQuery isn’t loaded into the browser by default. JQuery also has a lot of handy features (you could even call it a DOM missing library) that make already simple interactions extremely simple.

In fact, I believe jQuery is still widely used (I don’t have any data, just my gut feeling), but with important changes. Today, jQuery is not very satisfying, and you won’t find many tutorials on how to quickly write a small script for a page without much knowledge of JavaScript. Meanwhile, about five years ago, the standard for libraries was:

  • Store the minimized code on some CDNS
  • Bind functions it provides to global variables (such as window.backbone)

Some libraries still package the global module definition (UMD), which is essentially a global variable version of the loaded library, but many no longer do so. Now, there are more frameworks out there, and these widgets are frameworks specific, and you don’t just need them (if you need jQuery plugins, you need the jQuery library), you need the framework for all your pages!

Modern solutions

Of course, this problem has already been solved, and the solution is to provide a startup method or a specific framework on top of what you already have, and then you can use these little plug-ins and compile them into a static website. In addition, they load modules or compile code in the background using the tools described above, so you can use the latest version of JavaScript and break the logic into the best reusable units. A good example of this approach is GatsbyJS and nuxt.js. The startup is usually command-line, such as create-React-app, which hides all the tedious steps and simply tells the app to “just run” and then you can start writing components.

Still, what are the problems with this change? The code is more maintainable (thanks to modules), you can use the latest version of JavaScript, and you can be sure that any unsupported features have replacement patches, which were previously a problem spot. But in fact, there are many problems, in my opinion:

  • Now you must know JavaScript very well (much deeper than before)
  • Not just JavaScript, you probably also need to know about Webpack (to handle static resource loading — imagine you suddenly find yourself referencing images in your code)
  • Right now, your job involves building applications (rather than writing documentation) with files of about 200MB.
  • Blowing up your little app is as easy as sliding downhill.

I think the last part is the most noteworthy. Many tutorials advise you to add advanced data management libraries, refactor your code in a specific, “more declarative” way (think of all the people who try to convince you to refactor YOUR HTML structure), and many will do just that! These suggestions are good, but they probably only apply to large sites, not small, 5.html files. Yes, you can’t reuse menus, but you can copy them directly (and CSS classes make them reusable in some form).

conclusion

Maybe I’m wrong. Maybe it’s not so bad after all. But while using the Internet, reading blogs, and looking at web pages, I feel that these small websites that everyone could do with HTML and very little JS technology are slowly disappearing, and now more websites are being replaced with more “extensible” applications.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.