Web Components and Polymer

Web Components

I recently started working on a new web app and so started the process of trying to figure out what framework to use. Angular, Vue, React, something else? I remembered reading about web components so I thought I would take a look at that. I was pleasantly surprised by what I found.

I had thought that web components were another one of those things that was far off on the horizon, but it's actually implemented by most browsers at this point. And for the ones that haven't implemented it there are shims.

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps.

• Custom elements
• Shadow DOM
• ES Modules
• HTML Template

Custom elements allow you to create new elements and add them to the browser.

Shadow DOM allows you to encapsulated style and markup in web components.

ES modules allow you to load and reuse JavaScript components.

HTML Template allows you to create unused HTML fragments that can be instantiated at runtime.

See this page for more details: https://www.webcomponents.org/introduction

Polymer

Web components sounded great to me. I love the idea of creating small reusable components that can all be linked together to create an application. As I started to do more research on how to get started I discovered Polymer. This was another thing I've heard of before but never paid much attention to.

Polymer is a set of tools created by Google that helps you build web components. It also has a library of web components you can use in your own apps. I don't want to call it a framework. It aims to be very lightweight and allow for progressive loading of apps so they start up quickly. This is in contrast to the big frameworks that are large and take a lot of resources to run. Polymer's philosophy is to let the browser do what it does best.

See the Polymer site for more information: https://www.polymer-project.org/

So I decided to give it a try and use it my new app. What I like about Polymer:

• It gives you components to help you do routing and interacting with external services even when the user is offline
• Allows you to define your component's style and HTML markup as a string in your component rather than having to build a shadow DOM by hand
• Gives you two-way data binding to bind elements on the page to your data model
• It's not that hard to learn
• It's modular, use the pieces you want; it doesn't lock you into a opinionated framework
• It's lightweight compared to some of those frameworks out there (yeah, I'm taking about you Angular)
• Quick and easy to get up and running and create an app skeleton

Things I didn't like about it:

• The documentation isn't that great; It's hard for me to find all of the properties and values for polymer components. I spend a lot of time trying to figure out how things work. There aren't that many examples out there either. Luckily it's not too complex and I can figure most things out.
• I haven't found a way to extract the HTML markup and styles out of the JavaScript file. This makes it hard to get syntax highlighting and code completion. On the other hand I almost feel like this is also a good thing because it forces you to keep your components small.
• Two-way data binding is not intuitive at all. There are all kinds of little gotchas that require "hacky" workarounds to get changes to propagate to the same object in other components.

Conclusion

So far I really like using web components. I'm getting the same feeling I had when I first heard about HTML 5, like this is the future of web development. Polymer has some things that I don't like but it really helps you build apps from web components quickly. But doesn't every web dev tool have things you don't like? The question is, are those things bad enough for you to move on to something else. We shall see.

I'm really excited about this new technology. I'll be using it as much as possible in the near future so I will keep you posted on my progress. Look for more posts as I learn more about web components and Polymer.

Code hard!

Fixing NPM Global Packages

I recently got a new Windows computer and when I opened up an old Angular project I realized that I hadn't installed Angular CLI yet. So I installed it globally and tried it again. It still wouldn't work. When I typed "ng" on the command line it said it was not recognized as a command. I tried some other packages I know I had installed globally, like TypeScript. That didn't work either. WTF man!

Finally I discovered that there was a nodejs command prompt installed so I opened that and it worked from there. However that only fixed it for running from that particular command prompt. If I tried to run it in VS Code it still wasn't working.

So I opened up the batch file for the nodejs command prompt (C:\Program Files\nodejs\nodevars.bat) and noticed that it was adding npm to the path system variable. I looked at my path and I only had the nodejs path. So I added the path to npm, which I copied from nodevars.bat, and that fixed it.

Now that I think about it, this also solves a problem I had a few weeks ago when I created my own node app and installed it, but it wouldn't run from the command line. I figured I was just doing something wrong when configuring my app, but now I know I was right all along. Vindication!

Code Hard!

Node.js + TypeScript = Awesome

Node.js + TypeScript = Awesome

You can use TypeScript to write maintainable Node.js apps. Here's how to set up a project in VS Code.

Create the Project

First create a project folder. Next I like to use "npm init" to set up the package.json file for the project. This will make it easy to track your npm dependencies.

Now you can open the project folder in VS Code.

Set up TypeScript Compiler

To set up the compiler create a file called tsconfig.json and add the following into it.

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "sourceMap": true
    }
}

The important bit is to set the module to "commonjs" because this is the module loading system used by Node.js.

Start Programming

Create your main entry point TypeScript file. I usually call mine "main.ts".

Now you can add any supporting TypeScript files. To turn on the TS compiler to watch for changes and automatically compile go to the Tasks menu, select Run Build Task and select "tsc: watch" from the menu.

Although you can use the require keyword in your TypeScript files to import npm packages, you should use a TS import statement instead. Otherwise you will not get code hints.

import * as fs from "fs";

JavaScript Main File

You may want your main file to be a JavaScript file (don't ask me why). In that case you can import files generated by TypeScript using require. For example, if you have a TS file named myModule.ts then you would import it like so. Note that it must start with "./" so it knows it's a local module not an npm module.

let myModule = require("./myModule");

Note also that you probably don't want to use "export default" in your TypeScript file or you will have to reference the default item using the default keyword, which is a little awkward...

let something = myModule.default();

Code hard!