The front-end development ecosystem, however, is plagued with a myriad of tools, libraries, and frameworks that can be overwhelmingly difficult to navigate. How do you decide on what to invest your time to learn or adapt to your current workflow? First, it is important to understand the broader categories most modern frontend tools fall into and then decide on what to specialize in based on what piques your interest or is applicable for your project.
Editor/IDE (Integrated Development Environment)
Choosing an editor simply comes down to preference and what is most efficient for your application development. A basic editor might have limited features such as syntax highlighting, auto-completion, and multi-view, while a full-featured IDE might include support for version control, debugging, smart code completion, testing, and frameworks. Some other editors such as Sublime Text, provide optional tools and plugins which closely mimic the features of an IDE with the advantage of being lightweight.
Most modern applications rely on a framework only or a framework and library used together. For instance, you could use AngularJS as the framework and use React to create reusable UI components.
But why use a preprocessor in the first place?
- It lets you take advantage of newer ES standards that don’t have full browser support yet. Babel and Typescript are commonly used to compiles ES2015 (formerly ES6) into ES5 which is understood by all browsers.
- It provides optional static typing, classes, and interfaces (using Typescript). Static typing helps spot common errors as the code is being typed.
- It improves code readability (CoffeeScript)
The three most commonly used are SASS, LESS, and Stylus, with SASS being the most popular.
Automated tests ensure the stability of your application, and prevents errors in the final application that get shipped to the end user. In test-driven development, the developer can make changes confidently to the code without fear of breaking a previously working feature. This is usually part of a continuous delivery methodology in which passing tests are automatically accepted and deployed for staging and/or production.
Jasmine and Mocha are the two most popular testing frameworks. They do have their similarities but use different assertions/expectations. Mocha does not have a built-in assertion library and is usually used in conjunction with Chai assertion library. Testing frameworks are usually run in a browser test runner such as Karma (for unit testing) or Protractor (for integration or end-to-end testing).
Version control systems (VCS) help with managing source files in case you need to recall an earlier specific version. It also helps large or diverse teams collaborate simultaneously on the same code. The commonly used VCS include Git, SVN, Microsoft TFS, and Mercurial, with Git being the most popular and Github being used as a code repository.
It might be easier to adopt the workflow that comes with your framework of choice or swap out some of the tools with what you are already comfortable with. For instance, even though Angular2 comes bundled with Jasmine, you don’t have to go with it if you are already familiar with Mocha. You could create whatever workflow works for you and change it to adapt to your current project if you wish. The important thing is to decide on the tools for your workflow, learn their strengths and shortcomings, and then you can make a better-informed decision on whether to stick with what you have or learn other tools that better suit your requirements. Your choice should ultimately be based on need, not hype.