Tools and Resources For A Heavyweight JavaScript Experience – Overview
When many people think of the web, they conjure images of a PHP page bouncing around every time they click a button. Traditionally, the web has not been associated with high-performance application development, and people are slow to realize JavaScript’s progression over the last 6 to 10 years.
In this period of time, an explosion of tools and resources has become available making web development a heavyweight. NodeJS being the most significant catalyst of JavaScript development, allowing JavaScript to be run on your desktop or server without a browser. Open source development has taken off too, with literally millions of contributions within NPM’s repository. Tech giants like Google and Facebook have revolutionized the front-end sector. Finally, thanks to cloud computing, server and compute resources have never been so accessible or cost-efficient.
Imagine writing all components of a connected application in JavaScript, complete with API, database interaction, and front-end UI. This is not just possible, but accomplished with very little code! We’ll walk through this scenario in the second and third parts of this post.
Undisciplined Wild West? (Dispel the Myth)
If you’re like I used to be, then you’re probably thinking “Sure… you can build anything with enough duct tape.” You might even be thinking the web space is filled with a bunch of hacks that know nothing of coding standards, classes, or sustainable code. I’ve heard these criticisms from others, and even felt that way myself at one time! The fact is, these misconceptions are at least a decade old, and web development has matured greatly since then.
The problem is no longer tooling, but decisions and management. With the advent of TypeScript, it’s possible to have strongly typed code and design-time error checking. Tools like Webpack allow you to write highly complex code-bases with deep reference chains. NPM has made it possible to publish and use high-quality open source libraries, and modify them to suit your needs.
The JavaScript language has even made strides to make OOP developers more comfortable with the language. For instance, you can write a “class” in JavaScript using the new class keyword, as well as inherit from other classes using the extends keyword. I’ll admit, while they look and feel like classes, it’s important to note that JavaScript continues to utilize the prototype-based object system. This is one of those details that aren’t important until it’s important. For this discussion, it’s safe to think of JavaScript classes like traditional classes.
Type Safety & TypeScript?
For many like me, writing code in an untyped language can be difficult. Maybe even sacrilegious! Untyped code can be very inefficient to write and error-prone on mid to large projects. Anyone who has had to hunt down a 1+”1″ = “11” bug can identify with the benefits of having your types checked as you code. This is even more apparent on projects with multiple developers and teams.
TypeScript does a great job of providing a bridge between these two worlds. With very few exceptions, TypeScript is simply JavaScript with type definitions/annotations – nothing more. When I started using TypeScript, it had been a long time since I had used JavaScript. I thought TypeScript was responsible for making my JavaScript more like C#. I learned later that these features were actually newer JavaScript features. You are literally left with JavaScript content by removing types from your TypeScript file.
Of course, TypeScript allows a better workflow by improving code completion as well as design-time error checking. Even plain JavaScript developers benefit from types defined in 3rd party libraries. Many IDEs will still make use of the type definitions on vanilla JavaScript projects. On that note, a library written completely in JavaScript can and usually does have type definitions available for them. When type definitions aren’t included with a package, they are typically available as a separate package. Using NPM, you can usually install them using “npm install @types/package-name”.
import Keyword: Gluing Files Together
If you are only familiar with scripts in HTML, then you probably know that <script> tags are the primary way to load JavaScript into your code. Further, if one file depends on another, you need to ensure that they are loaded in the proper order to avoid errors.
Modern JavaScript development goes a different route. You can now reference file dependencies within your JavaScript/TypeScript files by “importing” dependencies to other files. This improvement eliminates the need to make complex script tagging structures in your HTML.
Further, the import keyword (and require keyword in Node) are one of the primary mechanics to allow complex applications to be built.
NOTE: The import keyword is relatively new in browsers, and may not be implemented in all browsers yet. When we discuss Webpack later on, however, you will see that the import keyword is essential to front-end development.
NodeJS and NPM
NodeJS and NPM are key elements of JavaScript development today for both server-side and front-end code. When I started down the path of JavaScript/TypeScript development, I began with Angular (a popular front end framework). Angular workflows involved heavy use of NPM and NodeJS, but I struggled to understand their roles and what they did.
NodeJS is simply a JavaScript engine that runs on your computer or server. In front-end development, Node is commonly used to run a process or script, such as compile SASS into CSS, or package up your application into a single JavaScript file. Beyond development, however, your front-end still only requires the browser as you would expect. On the server, you can use Node as your web server, and code against it in JavaScript. You can use node as a simple web server, or develop complex APIs that interact with database, files, or other outside APIs to service your application.
NPM stands for Node Package Manager. Anyone familiar with Nuget will have a good idea of what NPM is. NPM is commonly used to install and/or update your project dependencies. Further, it can be used to install system-level applications like typescript, without the need of downloading/running an install program. For instance, TypeScript can be installed on your system by running “npm install -g typescript”, where the “-g” tells NPM to install it globally.
While NPM works as a package installer, it is also used as a convenient way to execute scripts. Many projects have scripts defined in their package.json file, allowing them to be executed with a command like “npm start” or “npm run my-script”.
To get started, you can find installations of Node available on their site at: https://nodejs.org.
Webpack (Bundling For The Web)
So, we’ve discussed how files are all linked on server/PC code, but what about the browser? The <script> tags are still needed, but it’s impractical to use them to load the files for a large JavaScript project. You might get by with the new “import” feature on the browser, but what if you need your project to run in an old browser, like Internet Explorer? ‘import’ simply won’t work, and in the best-case scenario, downloading individual files for a large project can quickly bog the browser down.
This is where Webpack comes in. Webpack allows you to write your front-end JavaScript/TypeScript just like you would in Node, and bundle everything into a single package. Webpack makes Node and browser development so similar, that beginners tend to confuse the two environments.
Most people using Webpack don’t even know they’re doing so, because many front end frameworks like React and Angular use them transparently. The command-line tools used with these frameworks (like create-react-app and AngularCLI) handles configuration and execution of Webpack, so you almost don’t know it’s there. It’s important to be aware of Webpack’s presence though because this is one of the key tools that make modern JavaScript/TypeScript development possible. Specifically, the ability to write front-end code like you do for Node, without requiring a browser to load thousands of library files that your projects depend on.
Conclusion
Hopefully, this has helped you understand some of the components involved in modern-day JavaScript/TypeScript development. In part 2, we’ll work through the creation of the server and database implementations of a simple chat application. Part 3 will discuss the front-end of this application.
About Intertech
Founded in 1991, Intertech delivers software development consulting to Fortune 500, Government, and Leading Technology institutions, along with real-world based corporate education services. Whether you are a company looking to partner with a team of technology leaders who provide solutions, mentor staff and add true business value, or a developer interested in working for a company that invests in its employees, we’d like to meet you. Learn more about us.
