As web professionals are undoubtedly aware, many changes are happening with JavaScript these days. Yes, there is a fair amount of churn in frameworks employed on various projects. We did ask the question (some time ago) – are we relying too much on JavaScript? Regardless of your opinion about that question, we need to be aware that major changes are happening to core JavaScript as well. ES6/ ES2015 (ECMAScript 6) is the latest version making its way into browsers near you (and many other places). For those who have been working with web technologies for quite a while, you may recall that ES5 was released in 2009. Yes, nearly a decade ago.
We have found Ralf Engelschall’s site covering the new features of ES6 (along with comparison code [where possible] for ES5) to be a very useful reference site. Of course, in order to take advantage of ES6, it must have browser support. At I write this, it appears there is 97% support for modern browsers. Of course, this begs the question – are you using ES6 in your projects yet? At a minimum, have you moved from var to let and const?
In keeping with the question we asked some time ago – are we relying too much on JavaScript – we came across this well written article by Addy Osmani concerning the cost of JavaScript. It is roughly an 8 minute read (and well worth spending the time if you are an aspiring or practicing web professional). If you want your site to load quickly and interact quickly (especially on mobile devices), it is important to understand what is actually happening (and to practice a little discipline). Obviously best practices include:
- sending only the necessary code,
- minifying said code,
- compressing said code,
- caching said code, and
- removing unnecessary code.
Of course, this is often easier said than done. Addy also discusses why parsing/ compiling JavaScript in the browser is an important consideration. Lots of graphics are presented to help readers better understand what is actually happening (for example, good analysis of the Chrome DevTools). Best practices (such as employing the PRPL pattern and progressive bootstrapping) are also discussed. There are a number of references to learn more as well.
We also recently encountered Fedo.io. This looks like a very useful tool for documentation and takes a more consistent approach for product managers, designers, and engineers. Has anyone reading this tried this approach out? What were your experiences? Of course, many may follow the approach – you are what you document. Yes, it is an older article, but definitely something to think about. What are your thoughts regarding documentation (particularly as we begin using ES6)?
We thought it would be fun to mention this recent tutorial on building a memory matching game in JavaScript. This was created by Sandra Israel-Ovirih and is based on various classes taken. It relies on vanilla JavaScript and should be a good review for those who are presently learning the language. If you have no knowledge of JavaScript, we offer a course on the fundamentals of JavaScript through our School of Web learning management system. The first course is free for members (and subsequent courses are only $49 each).
Lastly, if you are looking for inspiration as to what you can accomplish with a little code, don’t forget about Dwitter. The functions are relatively short and the results can be most impressive.
We look forward to your comments and specific feedback regarding whether you have started using ES6 in your work for clients as well as your thoughts about documentation.
Best always,
Mark DuBois
Community Evangelist and Executive Director