Personally, I am not the greatest fan of new year’s resolutions. Nonetheless, every moment is good to validate your goals and adjust the strategy of achieving them. But why do I even mention some goals and strategy instead of throwing multiple languages, frameworks, and libraries at you? The problem with trying to pick up each new hot thing in JavaScript land is that it keeps you constantly occupied. We even have a name for it: JavaScript fatigue.
Time is a very limited resource. You have only so many hours you can allocate to shape up your skills. It is very easy to get distracted by yet another newsletter, hacker news or a twitter feed and spend the rest of the evening reading articles. I am guilty of this one and too often I find myself consuming articles with the goal of just “completing” all open tabs. It is hard to find a good balance between meeting your learning goals and the fear of missing out on the new great thing. That is why having a strategy is so important.
I would like to share a few of my picks for 2018. I believe those subjects can viably augment your software development skills. I divided them into fundamentals and cutting edge so you can work on your craftsmanship and also satisfy your curiosity.
Fundamentals
Language
JavaScript is a language of many twists and turns. Love it or hate it, but the pace of the language development drastically improved thanks to the efforts of the JavaScript community, in particular, the TC39 committee.
Babel made it very simple to embrace experimental syntax at an early stage. This is beneficial from the perspective of language creators and makes it possible to gather community feedback on experimental features. What I find dangerous is adopting this new language features into production code not knowing the risk. Only if you know the risk, you can manage it. Otherwise, it is just reckless. The question is, do you know it? What features were introduced in ES2016? There were only two – can you name them? What about environments that support async functions natively? Will you know when you can you stop using a certain Babel plugin? Can you tell the difference between language API and browser/Node.js API? Is setTimeout part of JavaScript language or a browser API?
Do you consider these questions valid interview questions for someone who claims to know the language?
DevTools
This may seem silly. Of course, you know DevTools! How to open developer tools is often one of the first things you learn from introductory JavaScript course. You may ask yourself, why would I want to spend more time on something so essential? Before you scroll to the next paragraph, it is important to understand that there is so much more to DevTools than a few tabs and Cmd+Option+I shortcut!
We all console.log everything when we stumble upon a bug but from time to time I cannot be grateful enough for a possibility to set up breakpoints and explore the running code using an actual debugger. Apart from the source inspector and debugging capabilities, there are multiple profiling and performance monitoring features. You can test user experience on a slow network or how it performs on low-end devices. Not everyone is using a $700 smartphone with unlimited LTE data plan.
DevTools are not only limited to be used with web applications but also available for Node.js if run with –inspector and –debug-brk flags.
ROI on time investment in learning DevTools is pretty clear to me. It will not give you a massive boost from the day one. Every-day, little speed-ups will collectively make you more performant developer.
- What’s New in DevTools
Security
Security tends to be overlooked as in fast, agile teams you are focused on providing “business value”. Security on its own neither generates income nor improves the conversion rate but can save you money and reputation in the long run. This spans responsibility for securing of the system across the entire team.
Security should always be perceived as a process instead of something you have completed. There is no way to be done with securing your application but there are things you can do to protect yourself from a security breach. There are multiple security checklists on the internet. It is good to make yourself familiar with them, although I do not consider completing such checklist a learning here. As a developer, you should get a high-level understanding of existing threads and be able to maintain the system in a way that reduces possible vulnerabilities. And yes, it involves setting security headers, sanitizing input, using CSRF tokens and all that but also keeping track of known vulnerabilities in your dependencies (nodesecurity.io, snyk.io). Recently GitHub introduced a similar feature, too. When you plan your work, you take into account writing tests and maybe pair programming. Schedule time for security checks and updating your knowledge on the latest vulnerabilities.
It would be beneficial if you managed to grow an inner hacker. Your inner hacker thinks about possible flaws in your application when you are working on it. How would you perform XSS attack? Is it possible to inject SQL into query params? It is not an easy thing to keep in mind while developing. Very often we just focus on completing a task. Make sure that security check is a part of your CI and code review process. Never implement your own encryption. Rely on proven solutions, learn how and when to use crypto module, BCrypt, and Argon2.
- Keeping passwords safe in 2017
- JSJ 294: Node Security with Adam Baldwin
- I’m harvesting credit card numbers and passwords from your site. Here’s how.
Progressive Web Apps
Progressive Web Apps disrupted the model in which modern web applications used to work. Progressive Web Apps bridge the gap between a web page and a mobile application. It is now possible to significantly improve caching strategies with Cache API, pin your web app to the home screen and use it as an ordinary mobile application, even offline!
ServiceWorker is the biggest milestone (but not the only one), which makes the difference between a progressive web app and, let’s call it, a conventional one. You might consider ServiceWorker or, in general, Progressive Web Apps more of a cutting-edge topic. Truth is, it is possible to use it in Chrome since 2014. The ServiceWorker life cycle is fairly complicated with its own set of challenges and testing is much more difficult than you want it to be. Nonetheless, I am always happy to work on it due to how beneficial it is for the user.
There is a wide range of possible use cases. You should keep in mind the track-record of companies which successfully implemented new features into their apps substantially improving performance, user experience, and finally observed a conversion growth.
- Progressive Web Apps: What, Why, and How? – touching on a business incentive for adoption of Progressive Web Apps
- The offline cookbook – Jake’s blog is a great resource to learn more about ServiceWorkers
Cutting Edge
WebAssembly
Since web browsers introduced JIT, we could observe that execution time is getting shorter and shorter. Performance is improving with every major JavaScript engine version. Despite that, there is still a certain class of problems we have to overcome. Parsing JavaScript is relatively CPU expensive. Sending 300KB of gzipped JavaScript can result in 1MB of code to parse. It might not be a big deal on your $2000 MacBook but on mid-spec Moto G it will double or triple the time needed to execute the code.
WebAssembly is a binary format which smaller and faster to load than equivalent JavaScript file. Emscripten is LLVM WebAssembly backend. C and C++ compiled with Emscripten can run at nearly-native speed in the browser. Rust compiler supports WebAssembly as well. Due to my recent experiments with Reason, I am also looking forward to seeing WebAssembly backend for OCaml compiler. All this is pretty mindblowing.
Initial specification reached cross-browser consensus and has been already adopted by major browsers.
Blockchain
Blockchain is a really hyped up topic right now. Mostly due to the recent rapid growth of cryptocurrencies market capitalization. There are many more use cases for Blockchain than storing value and exchanging assets. Blockchain space created an opportunity for developers to utilize decentralized space with smart contracts.
Long story short, a smart contract is an application you deploy to a particular Blockchain (such as Ethereuem, NEO and soon Lisk and EOS). Multiple blockchains which support smart contracts use technologies which are more or less familiar to JavaScript developers. They either allow for writing smart contracts in JavaScript (Lisk, NEO) or JavaScript-related WebAssembly (EOS) and Solidity (Ethereum)
If you are new to smart contracts, I would recommend getting started with Ethereum. It is the most mature platform, relatively well documented. Truffle is an Ethereum development framework, really helpful throughout the process of writing and testing smart contracts. Thanks to Web3.js it is possible to create a user interface which can communicate with your smart contract.
Wrap up
Those are my picks. You should have yours. The most important part of learning is to create an environment in which you have an opportunity to fail. We can learn really quickly from failures! You should also consider learning an entirely different language, even if you do not plan to use it in a day-to-day work. Looking for something low-level? Give Rust a try! Seeking to learn the functional paradigm? You will enjoy writing Elixir or Elm. Each community focused on a given technology has a set of patterns and techniques. Learn from their experience and find out how you can apply new knowledge to become a more efficient (not only) JavaScript developer.
