Issue #273 (ES6 Modules, Library Tools, Text Editors, Deployment)10/11/18
For those of you who still haven't looked into using JavaScript modules, introduced in ES6 and now with strong browser support, I'll introduce this feature here. Among other things, ES6 modules help with errors and problems that can occur due to naming collisions in the global scope, and they can also keep your code clean, organized, and easier to maintain, especially on a large project in a team environment.
Let's look at a basic example to see how you can use ES6 modules in a JavaScript codebase running in the browser.
I'm going to have an HTML page that includes the following script at the bottom of the page:
|
<body>
...
<script src="js/main.js" type="module"></script>
</body>
|
Notice the type attribute set to "module". This is required if I want this script to be able to use ES6's module-based features. This tells the browser that I want this file to load as a module, rather than a script.
In addition to main.js, I'm also going to create a secondary.js file in the same directory as my main.js file. But I'm not going to include that as a script in the HTML – the secondary.js file will hold code that I'm going to import into main.js.
Here is my secondary.js file:
|
export let color = 'blue';
export function add(n1, n2) {
return n1 + n2;
}
|
In this file I'm exporting two specific parts of the code: the color variable and the add() function. With these export commands in place, I can now import them to my main.js file:
|
import { color, add } from '../js/secondary.js';
console.log(color); // "blue"
console.log(add(10, 20)); // 30
|
The import keyword and the curly braces specify the bindings, separated by commas, that I want to import. As you saw in the previous code block, I identified via the export keyword which ones were available inside that module. If there's something inside secondary.js that's not exported, it won't be available via import in another module.
There's lots more to discuss on this topic, but this should give you a quick start to use this elegant feature introduced in ES6.
Now on to this week's tools!
|
JavaScript Library Plugins and Tools
Pramp - Free Frontend Interview Practice
Now you can practice for your frontend interview with a peer, for free. Practice HTML, CSS, and JavaScript over a collaborative environment with other awesome developers like yourself. Sign up to get unlimited interview credits! sponsored via ThoughtLeaders
jquery-calendar
A responsive jQuery calendar scheduler built with Bootstrap and Moment.js.
Skyhook
Toolkit for building complex drag and drop interfaces in Angular. Based on, and very similar to react-dnd, and is also powered by dnd-core and compatible with all back ends.
jQuery Rate
A jQuery plugin that allows you to draw simple ratings (e.g. a dynamic percentage rating circle graphic).
Angular Console
A tool to make it easier to build Angular apps powered by the Angular CLI.
Akita
Simple and effective state management for Angular applications.
express-sitemap-xml
Serve sitemap.xml from a list of URLs in Express (the popular Node.js framework).
ember-unused-components
Search for unused components in your Ember project.
Compodoc
The missing documentation tool for your Angular application. Generate your Angular project documentation in seconds.
TSQuery
A port of the ESQuery API for TypeScript that allows you to query a TypeScript AST for patterns of syntax using a CSS-style selector system.
ngx-smooth-dnd
A fast, configurable, and lightweight drag-and-drop, sortable library for Angular that uses CSS transitions for animations so it's hardware accelerated whenever possible.
|
|
Recommended Reading for Developers
|
Text Editors, IDEs, etc.
Snippet Store
A code snippet management app for developers for Windows and Linux (or build from source for Mac).
Optic
Automate routine programming. Open source project that brings smart code generation to your favorite IDEs.
VimResizeMe
Vim plugin to allow you to easily resize your window.
IntelliSense for CSS class names in HTML
VSCode plugin that offers CSS class name completion for the HTML `class` attribute, based on the definitions found in your workspace.
TypeScript Plugin for Sublime Text
Uses an IO wrapper around the TypeScript language services to provide an enhanced Sublime Text experience when working with TypeScript code.
vim-zen
Barebones Vim plugin manager.
VSCode GraphQL
GraphQL extension for VSCode that adds syntax highlighting, validation, and language features (e.g. go to definition, hover information, autocomplete) for GraphQL projects.
ngx-html-syntax
Angular2+ HTML syntax for Sublime Text.
lit-html
VSCode plugin that enables syntax highlighting and IntelliSense for HTML inside JavaScript and TypeScript tagged template strings.
Identicator
VSCode plugin that visually highlights the current indent depth in your code.
|
Module Bundlers, Deployment, etc.
rollup-plugin-run
When using rollup.js (the module bundler), run your bundles in Node once they're built.
worker-plugin
Adds native Web Worker bundling support to webpack.
Lyo
The easiest way to transform Node.js modules into browser-compatible libraries.
Drome
A minimal abstraction, dependency-free, plug-and-play, JavaScript task runner.
size-plugin
Prints the gzipped sizes of your webpack assets and the changes since the last build.
Babel
The popular JavaScript transpiler/compiler is now at version 7+ (details).
PreloadJS
A JavaScript library that lets you manage and co-ordinate the loading of assets and data.
npm-gif
Replace the `npm install` progress bar with an animated GIF.
Codemason
The best way for developers to build, deploy, and scale their container-based Docker applications with ease.
PWA Universal Builder
A framework-agnostic, multi-featured toolkit for building Progressive Web Apps.
|
A Tweet for Thought
Has this been your experience when landing a job with a company that insisted you're familiar with best practices?
Send Me Your Tools!
Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
BitMidi is a collection of popular songs and melodies in midi format (i.e. the worst audio file format in the history of everything).
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
