What is the concept of front-end tools / workflow?

0

Shortly after I started working in this field I had contact with the terms front-end and back-end, but only recently, I had more contact with the workflow tools (bower, less, sass, GIT etc).

Just to better explain my need, I started working on a company that was developing websites, but it was not the main focus, so it was half a mouth, I used the method of:

Low FTP file > edit (HTMLs full of tables and disorganized CSSs) > saved > upa for FTP > refresh site > (if it worked, success, otherwise, repeat the steps until it works)

But before long I realized that it was a beeeeem practice, so I changed a few steps (mainly for localhost testing), and, for personal reasons, I still have not implemented GIT to version.

But today I see these front-end tools, as an example base I'm going to pick up the Bower. What is the concept of using Bower? In the case, I create all the front-end code, so in the end I generate a result (JSs and concatenated and mined CSSs) for a destination, only then program? (read to program in the sense of encode / implement in a CMS)

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

Am I making a mistake about using it?

I need a hehe light because I'm thirsty to use these tools, especially preprocessors. I think of starting the bootstrap, but I do not want to mess around with CSS files, but instead use the SASS syntax.

    
asked by anonymous 06.02.2015 / 12:17

1 answer

6

I do not quite understand your doubt, but I think this answer can help you find a way.

It's cool to have such a thirst for new technology, but you do not have to go out wearing everything that's trendy just because it looks like everyone is wearing it, it's cool, and they say it's "right" to wear. Tools exist to solve a problem. If you do not 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? Okay, so that's the next step. Dominating SASS minimally, search Bootstrap and understand how to customize it with this preprocessor.

Very well. So you have a project using Bootstrap and SASS, and you're working on it (alone or as a team, it does not matter). It opened in the browser, it is working. But you want to change the color of a font. You change the corresponding .sass file (either bootstrap or other of your project), run SASS to generate CSS, and reload the page. Great, it worked! However, it is a bit repetitive to do this every time it changes the look. If you're messing around with a production system, it's probably even more cumbersome, as it may be necessary to minify and concatenate all CSSs into one. And look that we are not even dealing with JS, just CSS!

That's where tools come in to help you through the process. In this case, it would be Grunt or a similar tool, which serves to automate and sequence tasks. You create an instruction package, run a command, and then, 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 others methods).

About Bower, it's a package manager, it's for something else. I do not know if you have already used npm, which is the package manager of node.js. Bower does the same thing as npm, but packages are front-end components, not Node modules (in fact, Bowser requires Node to run, and is installed via npm). It is useful for projects where you use multiple libraries / frameworks at the same time, and you want to keep them always up-to-date. If any of these components depend on others, Bower manages it for you as well. You list the libraries in a configuration file, and Bower takes care of fetching and downloading the updates when it is run. Therefore, the bower is not meant 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 whole arsenal.

But it's easy to repeat what I said at the beginning: find the right tools to solve each problem. As long as you do not have the problem, you do not need the tool to solve it! Learn the languages and tools one step at a time, as each is needed. Trying to learn and use everything at one time has great chances of getting in the way of more than helping.

    
06.02.2015 / 20:30