Modularity on the frontend?

Question

css

Good afternoon! Interested in the issue of modularity.
I’ve been doing front-end for a relatively long time, especially layout, and now I want to automate all this and prepare a cheat sheet for building the project so that I don’t have to set everything up again every time. In my work I used gulp/grunt, css preprocessors. But somehow it seems that I did not use it all 100%.
I'm looking for advice on how to assemble it all, what should be the structure of the project (for example, for a landing page). That is, now this is how I see it ... each block in a separate module, in the module a jade and sass file, scripts, perhaps separately, would collect all this gulp / webpack.
I would like to see how this collection looks like from professionals, or at least hear advice. What plugins are used, perhaps other templating engine, the pros and cons of everything.
Thanks in advance)

Answer 1

(briefly to myself)
Everything is in folders: component + style. Assembled by webpack. But I have react projects.
If you have been studying for a relatively long time - you most likely have already worked out parts that are similar - take them out. Also, most likely you have the same structure (usually js/css/images and html, or how you write components (separate folders) inside which are html + styles and maybe js ). Make a template for future projects, first of all, convenient for yourself - after all, you work with it, and implement what you can to the maximum in it (click pictures, optimize js, etc.)
Plugins that you use for Gulp, just check in blacklist, and you can also see new versions. In general, it’s good if you know all your plugins, in which case you don’t have to do this item either.
Everyone thinks so, so when you don’t feel like doing work, go to Google and look at other people’s open-source projects: gulp , wepback , then if you find something interesting, go to npm/github and read the doc. We are trying to apply it at work.
1) if everything works and suits you (build speed, ease of checking in different browsers ...) - "work to work";
2) if you have time and desire - google open-source solutions, read interesting people's twitter / news subscription;
3) if you want to hear the opinion of colleagues, but there are no colleagues nearby, write an article on Habr. Just an article: I use such and such plugins in my "template" - it is unlikely to receive flattering reviews, but perhaps someone will write: this is where you feel bad, do it differently. Perhaps you will figure out how to write an interesting article - then honor and praise. And criticism. Well-founded criticism is always good.
PS if you use Jade and follow the BEM methodology, then I would recommend to look at this project

Answer 2

1. Take a closer look at BEM, they have developed not only an approach, but also many development tools. It is difficult to enter, but there is something to see.
2. TARS - frontend assembler from DoubleGIS. A very interesting thing, it allows not only to introduce modularity, but also save the programmer from many tasks. It works on the basis of the same gulp, but you don’t need to create assemblies, you just need to specify in the configs which preprocessors to use, and then TARS will figure it out on its own.
TARS uses the BEM methodology, but unlike the native BEM assembler from Yandex, TARS is much easier to get in and start working .
The article on Habré is not very good, to be honest. TARS does not reveal all the chips.
Documentation
Using the above Bemto under TARS will further bring clarity to the code.

Answer 3

There is no modularity in the modern front-end.
AMD, RequireJS, CommonJS, ES6 (a.k.a. ES2015), TypeScript, etc. use the word a lot, but in the end it all comes down to a Java-like import system.
Do you want to make sure?
--Create a folder and use npm to install something simple, but more complicated than hello-word; now look in the node_modules folder -- who are these people?? It would seem that I set up a simple thing, but as a result, 10 MB of code on board ..
There are no components either.
Angular, React are cheating. Especially Angular.
The component assumes portability.
Try to transfer something more or less significant from one angular project to another; I'm silent about the transfer to a non-angular project.
As a result, I had to write my own system with clear dependency management, root composition, etc., etc.
In general, if you are interested, look towards serious "ecosystems" such as Java and / or C #.
Search by keywords: dependency injection, IoC (-container), composition root, etc.
And on the frontend, this is not even in its infancy.

Answer 4

1. Assembly from HTML blocks: https://github.com/xmoonlight/includeHTML
2. Nano templating engine: https://github.com/trix/nano
3. OOP in JS: largescalejs.ru

Answer 5

Look at yeoman.io , it has a huge number of generators, these are blanks for starting a project, you can find a blank for anything. Project structure, preprocessors, compression, optimizations, unit tests, everything is already set up. You have to take it and use it. Doing everything from scratch, especially the first time is not worth it. It is worth first seeing how it is customary to do it correctly.

Answer 6

https://github.com/zoxon/gulp-front

Answer 7

I am for React + Webpack