So you have mastered the basics and want to tackle larger projects?
Once you have mastered the basics, it’s time to take your skill set as a web developer to the next level. The techniques and tools we discuss today will help you handle much more complex projects.
In part 1 of our series on how to become a web developer, we looked at the fundamental knowledge any web developer should have. In part 2 of becoming a web developer, we will take a look at some tools and techniques that will help you handle larger and more complex projects.
From build tools and package managers to CSS pre-processors and template libraries, we cover it all. Strap in and let's get to it!
Tooling: Giving You A Head Start
One of the places with the largest room for improvement in the web development space is the use of tools to speed up the development process. Front end development is a little late to the party when it comes to opinionated tooling frameworks. In recent years, yeoman and its associated projects have made great strides in kickstarting new projects, prescribing best practices and providing tools to help you stay productive.
Yeoman is a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications. They provide everything you need to get started without any of the normal headaches associated with a manual setup.
Have a look at the videos below for more in-depth information on why you should get to know yeoman.
Build Tool: Automate Everything!
Why should you bother with a build tool?
In a word: Automation.
Build tools (or task runners) allow you to automate repetitive tasks like minification, compilation, unit testing, linting, etc. Additionally, it allows you to specify task dependencies and the build tool will ensure that tasks are run in the correct order.
My two favorite build tools are Grunt and Gulp:
- Grunt: The Grunt ecosystem is huge and it’s growing every day. Grunt is very popular so there are hundreds of plugins to choose from. If you are new to web development and web tooling, I would start with Grunt, there are more packages available and it uses configuration instead of code to set up your builds so it’s a bit easier to get started.
- Gulp: Gulp is slightly newer than Grunt and as such doesn’t have quite the number of packages or the community that Grunt has. There are some major advantages when it comes to the speed of your build though. Besides the speed benefits, Gulp also uses code instead of configuration. This makes it a bit easier to build highly custom tasks. Have a look at Gulp if you have very large builds and need faster build times. This is a project to watch.
Packaging Systems: Lego for the Web
Packaging systems take existing libraries and tools like jQuery, Bootstrap, Moment, etc. and converts them into re-usable packages that are versioned and centrally stored. This allows you to declaratively specify the components you use and their versions. The package author can also specify dependencies and your packaging system will automatically install all the required packages for you.
Packaging systems to check out:
Media Queries and Responsive Design
The number of devices that people use to browse the web has exploded. We, as web developers, have had to adapt by learning to design for multiple form factors. Responsive Web design is an approach that suggests that design and development should respond to the user’s behaviour and environment based on screen size, platform and orientation.
Teamtreehouse has a great project that takes a non responsive site and modifies it to be responsive.
Some other links you might want to check out are as given below:
CSS Processors: Fixing CSS
CSS preprocessors take code written in a preprocessed language and process it to produce valid CSS. Preprocessors try to work around some limitations in CSS by adding things like variables, mixins, functions, etc.
For an introduction to what CSS pre-processors are and why you should use them:
The most popular CSS preprocessors are:
If you go with Sass, you should also check out Compass (Compass Basics Course).
Front End Libraries
Front end libraries provide a set of default CSS classes and JavaScript modules to help you build modern responsive web UIs. They typically contain grid systems, menus, input controls, etc. Front end libraries help by giving you a head start with the common controls and you get to benefit from a widely tested and cross browser codebase.
Some frameworks to check out:
To get a feel for developing sites in both Bootstrap and Foundation, try this course on framework basics. For a more in depth look at bootstrap, have a look at the “Building websites with Bootstrap 3” course.
Templating
HTML template processors allow you to bind data in a JSON document with HTML templates to produce the markup for your site. They allow you to reduce duplication in your code and make it much simpler to make changes to the site over time. There are many many to choose from, try a few and see which one you prefer.
UI Framework: Building Rich Web Apps
UI Frameworks help you take the complexity and user experience of your web apps to the next level. For an in depth look at UI frameworks and how they differ, have a look at this excellent post (it’s a bit old but still valid). UI Frameworks typically provide 2 way data binding, some kind of templating system, client side routing, etc.
These frameworks can be quite complex and have a bit of a learning curve at times. If you want to build rich, 1 page apps, they are more than worth the effort to learn.
Examples:
Here is a quick introduction to AngularJS:
Conclusion
Once you have mastered all the concepts and technologies above, you should be able to build and maintain some pretty complex sites.
Next time, we take a look at server side coding and building dynamic data backed sites.
If you are getting stuck with anything, please leave a comment below and I’ll try and help.
Happy coding!
