activewidgets/getlibs

OBSOLETE, DO NOT USE: This project is no longer maintained

https://unpkg.com/getlibs

An in-browser module loader configured to get external dependencies directly from CDN. Includes babel/typescript. For quick prototyping, code sharing, teaching/learning - a super simple web dev environment without node/webpack/etc.

All front-end libraries

Angular, React, Vue, Bootstrap, Handlebars, jQuery are included. Plus all packages from cdnjs.com and all of NPM (via unpkg.com). Most front-end libraries should work out of the box - just use import/require(). If a popular library does not load, tell us and we'll try to solve it with some library-specific config.

Write modern javascript (or typescript)

Use latest language features or JSX and the code will be transpiled in-browser via babel or typescript (if required). To make it fast the transpiler will start in a worker thread and only process the modified code. Unless you change many files at once or open the project for the first time, the transpiling should be barely noticeable as it runs in parallel with loading and initializing the UI framework.

No server/build required

No need for a build process or even a web server. Just use static files, open in a browser and hit refresh :-). Or run Browsersync in watch mode for auto-reload.

ATTENTION! This is all good for dev environment only. Before going to production, you still need to setup webpack/rollup/eslint/karma/whatever and run a proper build. It is not a good idea to transpile your code in-browser in production (unless it is only required for a small number of older browsers - but we are not there yet :-).

Installation

There is nothing to install, just include a link to getlibs script on CDN -

<script src="https://unpkg.com/getlibs"></script>

Usage

Organize your code as separate modules and call System.import() to load the app.

<script>
    System.import('./main.js');
</script>

Or use <script type="x-module">...</script> to put everything into index.html

ES5/require()

var compile = require('lodash/template'),
    template = require('./hello.tpl'),
    data = require('./hello.json'),
    render = compile(template);

document.getElementById('app').innerHTML = render(data);

[Full Source]   [Open in browser]  

ES6/import

import React from 'react';
import ReactDOM from 'react-dom';
const msg = 'Hello World!';

ReactDOM.render(<h1>{msg}</h1>, document.getElementById('app'));

[Full Source]   [Open in browser]  

Typescript

import {Component} from '@angular/core';

@Component({
    selector: '#app',
    templateUrl: './app.component.html'
})

export class AppComponent {
    msg = 'Hello World!';
}

[Full Source]   [Open in browser]  

Running from filesystem

You will get cross origin errors if you open the examples in chrome directly from the filesystem. To allow file access in chrome lauch it with --allow-file-access-from-files flag (more info).

How it works

getlibs is based on SystemJS module loader. Instead of typical setup where it looks for external packages in node_modules directory, getlibs is configured to load libraries directly from NPM (via unpkg.com) or cdnjs.com, if available.

About

SystemJS is a module loader developed by Guy Bedford.

getlibs is a bundle of SystemJS with a custom config - maintained by ActiveWidgets.