I weep for new front end developers starting out today. The number and complexity of tools being used has skyrocketed, showing no signs of slowing down. This is a short guide for beginners getting started with front end dev tools today.
When getting started…
Don’t try to build the mystical ‘perfect workflow’ at the beginning of your project - expect it to grow and evolve as your project goes on. Avoid wasting time adding tools that you’ll never use or will later prove a bad match for your needs.
Start small - learn one tool at a time. You’ll get up and running faster and gain a deeper understanding of what each tool does.
Add a new tool only when the need arises - it should either save you time and/or improve the quality of your work.
For each tool, estimate the time spent in research, setup and maintenance vs the benefit you expect to get from it.
When choosing between tools, consider -
How long has it been in development? (check its version and date)
Are top developers and companies using it? (check lists on the project’s site, article and Twitter mentions)
Is it being actively maintained? (check closed issues on Github)
Automate all of your boring, time-consuming tasks, such as -
Start a local web server to preview your site
Combine and optimise your images, HTML, JS and CSS files
Convert your JS and CSS code into formats more widely supported by browsers
Test your JS or CSS (preprocessor) code
Test your website across multiple browsers, devices and operating systems
Analyse the performance of your site
Deploy your site
Build systems are often created with a JS task runner - such as Gulp or Grunt - which both run using Node.js.
Browser devtools and extensions
Debug issues with your site, simulate testing across devices & networks and check your site’s performance.
If you want to ignore the ‘learn one tool at a time’ advice and just dive head-first into a complete development workflow, starter kits may help you. They provide a base site template (HTML, CSS, JS) and a tooling framework to begin new projects. They’re also flexible - individual tools within each can be added or removed as needed.
Recently, I needed to evaluate several JS charting libraries for use within a React application. I settled upon Chartist.js - it's SVG based, responsive, extensible and built with Sass. This article shows how to use Chartist.js within a React component.
Chartist.js requires a data object containing two arrays - labels (x-axis) and series (y-axis). series can be a single or multi-dimensional array, depending on whether the data points should be grouped or not (in this example, there are two data groups).
In React, the top-level App component renders the ReactChart component with the Chartist.js data prop. On render, ReactChart creates an empty .chart div container, after which the componentDidMount method calls updateChart to render the chart within it.
In a real-world example you’ll often be dealing with dynamic data, so let’s update the previous example. I’m using the Reflux library to handle dataflow, but this could be substituted with any variation on Flux architecture.
The data object in the previous example is now within a Flux DataStore. The App component has a new Flux mixin which will automatically call render when the DataStore is updated. The ReactChart component has a new componentWillReceiveProps method which receives the updated DataStore.data prop and re-renders the chart.
On click of the button, it will call the updateData method in DataStore to update the Chartist data series (for example purposes only).
I don’t want to load ReactChart in browsers unsupported by Chartist.js, so let’s finish by using Modernizr to detect SVG support. Chartist.js’s base support is -
Confusingly though, some additional features such as multi-line labels (using <foreignobject>) are not supported in IE or Android 4.3 but auto-fallback to <text>. Hence, a Modernizr.svgforeignobject test would stop the component loading in the aforementioned browsers when it works perfectly fine :sadface:. I resorted to a hackModernizr.svgfilters test which has the desired browser support -
Android 4.3+ Android 4.4+
If supported, the new enabled state in ReactChart is set to true before the component first renders in componentWillMount.