02. Explore new ways of declaring variables
The main benefit that both let and const deliver over var is that when using var , your variables get scoped to the top of the current function, therefore making the variable available to the whole function. In contrast, let and const are scoped to their closest block, allowing developers to declare variables within if , while , for and even switch blocks, without worrying about the variable scope leaking outside of that context.
03. Use arrow functions to keep ‘this’ intact
There are two main ways of writing arrow functions: one-liners and multiple-liners. One-liners have only one expression and return the value of that given expression, without the need for curly braces. Multiple-liners, on the other hand, have curly braces and the return keyword must be used explicitly.
04. Use promises to avoid a callback can of worms
The problem begins, though, when you’re executing an async action that will trigger another async action, and so forth.
You’ll likely be passing many nested callback functions, which will make the code cluttered and harder to read.
Promises solve this problem by helping you execute code in the right order, in a concise manner, while keeping operations asynchronous.
The API is pretty neat: you tell the code to do something, then something else, then something else – and you’re even able to catch errors along the way.
05. Replace ‘for’ loops with ‘map’ to keep things simple
Let’s pretend we have an array of numbers and we’d like to produce another array by doubling all of the numbers from the first array. One way to do this is to declare an empty array, write a for loop, and set a number in the second array by looking up the index on the first array and doubling it.
Or we could use a more concise solution by mapping an array to another array:
[1, 2, 3].map((num) => num * 2); // [2, 4, 6]
06. Replace ‘for’ loops with ‘filter’
This time, let’s pretend we have an array of numbers and we’d like to produce another array containing only the even numbers from the first array. Again, one way of doing this would be to declare an empty array, write a for loop, and write an if statement to check if the number at the index is even (for example).
Or, we could use the filter method available for arrays:
[4, 7, 2, 3].filter((num) => num % 2 === 0); // [4, 2]
07. Use ‘reduce’ instead of ‘for’ loops
For this exercise, let’s calculate the sum of all of the numbers in an array. One way to do this would be to declare a variable that has zero as its initial value. Then, we would write a for loop and traverse our array, taking each number and adding it to our newly created variable. Or we could use the reduce method:
[7, 2, 4].reduce((a, b) => a + b); // 13
Of course, we could combine all three concepts by multiplying all the numbers by 7 and adding all the numbers that are smaller than 20:
[3, 2, 1, 6] .map(num => num * 7) .filter(num => num < 20) .reduce((a, b) => a + b); // 21
08. Take advantage of immutability
Data immutability is a common concept in functional languages. Immutable data allows programs to detect changes early on by comparing object references, instead of having to continually check and iterate through objects to see if we need to refresh the data on the screen.
09. Node.js: Avoid switching language context
It also allows libraries to be shared between the client and the server, which decreases the amount of duplicate code one has to write.
10. NPM: The world’s largest package manager
With over 300 thousand packages, npm (the node package manager) has become the biggest package manager in the world, containing more packages than Java’s Maven Central Repository, PHP’s Packagist, and even .NET’s nuget. Plus, the level of collaboration that happens within the community means writing an application has never been so convenient.
11. NPM: Bring in frontend dependencies
Over the years, there have been many recommended practices around bringing in external dependencies into your local codebase. What are the best practices for using libraries like Bootstrap or Zurb Foundation? Including them from a central CDN or downloading everything manually from their website?
With the rise of the npm, an increasing number of developers are getting rid of alternative solutions like Bower and simply sticking to npm for everything. Yes, even CSS dependencies.
12. Angular: One framework to rule them all
13. React: The view library that shook the UI world
React is a view library. This might sound small and innocent, but don’t underestimate it, as this little library put a dent in the whole UI development world. When React launched, it garnered contrasting opinions from veteran web developers. Fortunately, the Facebook engineering team knew it was on to something. Applications written with React carry a component-based architecture, keeping things small and composable. It often adopts functional paradigms to solve problems.
If you’ve ever used Ruby on Rails to write a web app, you’ll know it uses the convention-over-configuration paradigm. This means it’s very opinionated about how apps should be written, which is exactly what the team behind Ember delivers for JS developers. Ember is a very complete framework with predictable development practices. This makes it easy to use all the best practices while writing applications.
15. Redux: State of management for all
One of the hardest parts of writing apps with highly dynamic user interfaces is keeping up with the application’s state. This is the problem the Redux library addresses. Redux is commonly used alongside React and is slowly being adopted by the Angular community. It helps you write applications that behave consistently and it offers a great developer experience. So if you’re writing an app that might become very large, you should consider using Redux from the get-go.
16. Try visual regression testing with PhantomCSS
Every developer that’s been around for long enough has accidentally pushed a bug to production at one point or another. There’s no shame in that. Especially with UI development, it’s hard to prevent errors within CSS and HTML markup. Or is it? It turns out there is a package called PhantomCSS that helps with visual regression testing. It works by taking screenshots of before and after changes and calculating the difference between the two images.
17. Go beyond console.log
18. Use debugger
One feature that often gets overlooked by developers is the debugger keyword. Instead of using console.log() to do some pseudo-debugging, simply add the debugger and modern browsers like Google Chrome will add a breakpoint so you can have a deeper look at your app’s state, including all local variables.
19. Remember semicolons are optional
20. Have a strict-typed codebase