What is the concept that involves the tools/workflow front-end?

Question

Shortly after I started working in this branch I had contact with the terms front-end and back-end, but only recently, I had greater contact with the tools for workflow (Bower, Less, Sass, yo, GIT etc).

Just to better explain my need, I started working at a company that developed websites, but it wasn’t the main focus, so it was pretty half-assed, I used the method of:

FTP File Download > Edit (Htmls full of Random and Disorganized Csss) > Save > Pan to FTP > Update site > (if it worked, success, else, repeat steps until it works)

But before long I realized it was a deteriorated beeeeem practice, so I changed a few steps (mostly for localhost testing), and for personal reasons I haven’t implemented the use of GIT for Versionar.

But today I see these front-end tools, as a basis for example I’m going to take Bower. What is Bower’s concept of use? In this case, I create all the front-end code, in order to generate a result (Jss and Csss concatenated and minified) for a destination, only then to program? (read programming to encode/implement in a CMS)

But what if I want to maintain it, and have more people working on the same project?

I’m making a mistake about using?

I need a hehe light because I thirst for using these tools, mainly pre-processors. I think about starting the use of bootstrap, but I don’t want to mess with the CSS files but use the SASS syntax.

Answer 1

I don’t quite understand your doubt, but I think this answer might help you find a way.

It’s nice to have this thirst for new technologies, but you don’t have to go around using everything that’s trendy just because it seems like everybody uses it, which is cool, and which they say is "right" to use. Tools exist to solve a problem. If you don’t have the problem they solve, there is no reason to want the tool! Why buy a screwdriver if what you need is to saw a board?

So you say you want to use CSS preprocessors, and you’ve even chosen SASS. Great, start there! Study SASS and test, see how it works. Want to use this to customize Bootstrap? Right, so that’s the next step. Mastering SASS minimally, search Bootstrap and understand how to customize it with this preprocessor.

Very good. So you have a project using Bootstrap and SASS, and you’re working on it (alone or as a team, it doesn’t matter). Opened in the browser, it’s working. But you want to change the color of a font. You change the file .sass corresponding (either from bootstrap or another in your project), run SASS to generate CSS and reload the page. Great, it worked! However, it’s a bit repetitive to do this every time you change the look. If you’re tampering with a system in production, it’s probably even more laborious, as it may be necessary to minify and concatenate all Csss into one. And we’re not even dealing with JS, just CSS!

This is where tools come in to help you in the process. In this case, it would be the Grunt or a similar tool, which serves to automate and sequence tasks. You create an instruction package, run a command, and that’s it, all the tasks are executed, in the right order for you, including updating the browser and copying the final files to the production server (either via git, ftp, rsync or other methods).

About Bower, it’s a package manager, it’s for something else. I don’t know if you’ve used npm, which is the package manager of Node.js. Bower does the same thing as npm, but the packages are front-end components, not Node modules (by the way Bowser requires Node to work, and is installed via npm). It is useful for projects where you use multiple libraries/frameworks at the same time, and want to keep them up to date. If any of these components depend on others, Bower manages it for you, too. You list libraries in a configuration file, and Bower takes care of fetching and downloading/installing updates when it runs. Therefore, Bower is not used to concatenate or minify JS or CSS. There are other tools for this. And there’s Grunt and other similar tools to automate the use of this entire arsenal.

But it does not cost to repeat what I said at the beginning: look for the right tools to solve each problem. While you don’t have the problem, you don’t need the tool to fix it! Learn languages and tools one step at a time as each is needed. Trying to learn and use everything at once only has a good chance of getting in your way more than helping.