Our software engineers at Sprout Social care deeply about the product we deliver to our customers everyday. We obsess over minor details and love discussing the best way to engineer features. We are never 100% satisfied with our work and are constantly looking for ways to improve our skill set.
That’s why being a passionate JavaScript engineer today is so exciting. Whether you’re new to JavaScript or a veteran, you’ve undoubtedly heard about ECMAScript 6 (ES6 or ES2015), which is the latest version of ECMAScript (the underlying scripting language behind JavaScript). This new version is a major update to the language and the first since 2009.
But before we dig into the exciting future, let’s recap the past.
Infancy
There have been many reasons to dislike JavaScript. It’s long been a punching bag by experienced programmers, and those criticisms had validity during its early years. JavaScript was created in 10 days by one guy with absolutely no intention to be widely adopted by every browser. On top of that, it was given the prefix of an already commonly used programming language with a much better reputation (Java). This lead to much confusion and unequal comparisons. Needless to say, not a great start for any language, but it had promise.
Childhood
The first sign of growth was its new ability to validate an HTML form. This was JavaScript’s first taste of pride and a great tool for any website looking to improve its shopping cart checkout process. The immediate feedback to the user led to a better experience and sparked clever ideas from creative developers. These ideas led to niceties, including tooltips, popup modals and accordions, which lead to the creation of many libraries to help create such user interface gadgets.
Adolescence
Like any adolescent, JavaScript was trying to prove itself to be more important than fancy UI gadgets. So it improved security, enhanced performance and added the ability to asynchronously talk to the server, which meant it could be intimately involved with underlying business logic and balance the effort between client and server. This led to more advanced libraries, some of which are still commonly used, such as jQuery.
Adulthood
JavaScript is only getting better with age. It’s proved itself to be a truly viable part of every web application and accepted by programmers old and new. However, to be truly accepted, there are some fundamental qualities that JavaScript still needs. Enter ECMAScript 6.
The new version of JavaScript has some familiar qualities that other respected languages will applaud. The most fundamental—and my favorite—is Modules. Having the ability to cleanly and clearly separate your code and define your dependencies is a proven strategy to avoid regressions and increase code reuse. There are over 20 new features to be excited about. Some are simple syntactic sugar, such as block scoping with “let” and “const,” while others are major advances, such as generators (a function that can return multiple values) and iterators (accessing elements in an iterable fashion). This onslaught of new features is bringing JavaScript to a respectable adulthood that we are embracing at Sprout.
So How Do We Do It?
As excited as we are to embrace the future of JavaScript, it comes at a cost. It’s not as easy as flipping a switch. We have to build a bridge from our legacy code to the new version. We do this by using a transpiler. The idea is to write code that leverages ES6 capabilities (the new, super cool way) and then run it through an automated process that intelligently changes our super cool code into code that browsers can interpret correctly.
There are many transpilers available, but the one that is quickly becoming the most popular is Babel. We have become great fans of Babel here at Sprout. You can even hunt down our logo on their users page. Our giddiness has turned into a dedicated meeting once a week where we discuss all that Babel can provide us. This meeting has become our round table for the future of JavaScript. We discuss what new features to whitelist into our application, define best practices related to the new features and determine how to educate the rest of the team.
Another tool that is critical for our leap into the future is Webpack. Webpack is a module bundler that has become crucial to our build process. You may recall that Modules are my favorite new feature, but they require some heavy lifting. Since browsers don’t understand how modules rely on each other, we need an automated process to sort all of that out. Webpack does this beautifully. It creates a dependency tree of all of our module code so that it can intelligently bundle it together. Bundling is important because it packages our code into bundles to lessen the amount of requests the browser has to make. With the introduction of Webpack, which plays very nicely with Babel, we are able to separate our code into modules, which leads to better reuse and easier maintainability.
Another great feature of Webpack is its ability to integrate third-party libraries as modules. This opens a whole new realm of possibilities for us as we were eager to adopt the React library as a module. React is quickly becoming the popular choice to build UI components. It brings the idea of modular code to the view layer. For example, when we create a datepicker in our reporting section, we can easily reuse it in our publishing section. Since everything is in modules, we can be confident that the two instances can run consistent to our design yet independently of each other.
Everyone Wins in the End
The future is bright for JavaScript, and we are excited about it here at Sprout. The new syntax brings extra functionality, which ultimately leads to quicker development of new features to the user. ES6 also provides more clarity, which contributes to a more stable application. Everyone truly cares about the product that we provide to our users, and we work hard to maintain it. ES6 allows us to do it better and have fun while doing it.
The post Embracing the Future of JavaScript appeared first on Sprout Social.
No comments:
Post a Comment