The original post in this series is intended as a bit of a parody and mimics the quick start of a very popular framework. I’m not trying to state that all frameworks are bad, but it is important to point out how far the JavaScript language specification has evolved. It illustrates what is possible without loading third-party frameworks or involving complicated build processes.
After posting the first article, I received a comment about whether it is practical to assume clients will have the latest JavaScript. The answer is, “it depends.” Most consumers are on the latest engines because phone and desktop browsers auto-update. It is corporate environments that pose the greatest risk, as they may in some cases be “locked down” into older browser versions.
If you find yourself in this predicament, it is possible to take modern JavaScript and compile it to legacy browsers. This post walks through the process.
Note: the code “as is” uses the new fetch API to load data from a test endpoint. Like the older XMLHttpRequest API, this is not a language feature but a browser feature that is exposed to JavaScript. This post covers converting modern JavaScript code to ECMAScript 5, not handling browser differences outside of the JavaScript version that is supported.
Setup
Prerequisites are git and node.js (with npm).
First, clone the repository.
JeremyLikness / VanillaJs
An example of using modern JavaScript for framework-free development.
Vanilla.js
This repo is associated with the blog post:
It is intended to demonstrate:
- Building a web app with modern JavaScript and no frameworks
- Converting modern JavaScript to legacy JavaScript using TypeScript
The base example is in plain
.
Legacy JavaScript Support
The TypeScript example is in ts
.
For a walk through, read:
Convert Modern JavaScript to Legacy (ECMAScript 5) in Minutes
git clone https://github.com/jeremylikness/VanillaJs.git
Open plain\index.html
in your browser to verify it is working. This is the modern version. Make a new directory named legacy
and copy all three files from plain
into it. Navigate into your legacy directory.
Initialize a node project.
npm init -y
Install TypeScript.
npm install typescript --save-dev
Initialize the TypeScript configuration.
npx tsc --init
Edit the generated tsconfig.json
file so that the property strict
is set to false
. Make sure that the target
is es5
(this should be the default) so you generate legacy code.
Transform
Next, you’ll transform the JavaScript to TypeScript.
Change the file extension from .js
to .ts
. If you’re using an IDE, like the free cross-platform Visual Studio Code, you’ll notice a few errors. There are two things necessary to finish the transformation.
First, in the constructor for the Wrapper
class, add the keyword public
to each of the parameters. This informs TypeScript they are valid properties on the class. The updated constructor should look like this:
constructor(public element, public text, public display = true) {
Next, fix the collision between the static generate
methods by renaming the one on AnchorWrapper
to generateAnchor
:
static generateAnchor(href, text, target = "_blank") {
To use the newly renamed method, search and replace the two instances of AnchorWrapper.generate
with AnchorWrapper.generateAnchor
.
The last step is to compile the TypeScript to JavaScript.
npx tsc
That’s it! You should be able to open the index.html
file in your legacy
directory and see the app running successfully. Look at the generated app.js
code to see how much has changed from earlier versions of JavaScript! You can use this same process to convert your other JavaScript projects by taking advantage of the fact that TypeScript is a superset of JavaScript dialects.
Pro Tip: For a "quick and dirty" solution, if you don't have a lot of code, head over to the TypeScript playground and paste your code in the left pane, then copy from the right!
Regards,
Top comments (2)
Jeremy, please create more content like this.
@jeremylikness I returned to this content today and found it helpful. Good stuff