websdk

v3.0.0

Published

2 years ago

Web SDK is a set of conventions and code to provide modularity and lazy loading for web components and libraries under a unified and simplified build approach through webpack

Downloads

0High
0Medium
0Low

juliostanley

websdk web sdk polymer webpack build frontend javascript es2015 es6 progressive progressive web apps

Web SDK

See some sample usage at https://github.com/juliostanley/websdk-custom-elements/ and https://github.com/juliostanley/websdk-samples/

The websdk is a library to ease the creation of progressive web apps. Eases the usage of latest ES features and Web Components.

With ES import/export, web components and a data binding preference (Polymer or Redux Adapter), you can replace most of the common "frameworks".

Using websdk and npm scripts you can replace most/all of the needs for grunt, gulp, vulcanize and crisp. It uses babel to enable ES2015 features even for you polymer web components as ES Classes

The project is possible thanks to many other great libraries, look at package.json dependencies.

Features:

Simple build system (based on webpack):
Lazy load webpack modules through webpack
Declerative imports
Allows for incremental migration between frameworks
build Not opinionated in terms of directory structure
build Minification of your files when running --env prod flag
build Bundling of files
build Use npm or yarn

Suggestion

On large applications, use redux, polymer and polymer-redux. Use redux-observable for complex state flow.

How to use

npm install websdk
npm install live-server # Not required, only for demo purpose

Create ./your-build.js

// build.config will be the webpack config
// Access to rules object through build.rules. Object.keys(build.rules)
// Access to plugins object through build.plugins. Object.keys(build.plugins)

var build = require('websdk/build');
build.config.output.publicPath = '/artifacts/'; // Server url path
build.config.entry.style = __dirname + '/any/file/for.css'; // Or less or sass/scss
build.config.entry.start = __dirname + '/any/file/for.js'; // JavaScript
build.run();

Run your build with

node ./your-build.js --od=artifacts --w

Create an ./index.html

<!DOCTYPE html><html><head></head><body>
<script src="artifacts/style.bundle.js"></script>
<script src="artifacts/start.bundle.js"></script>
</body></html>

Run your server

live-server .

FAQs

Why use javascript for css? To not block rendering (some browsers still block when using link tags), you can deliver a spinner while base styles load
Can I customize the webpack config? Yes. Its all under build.config, change it before executing build.run()
I would like stats on my build Run your build with the flag --profile and upload it to Webpack Analyse
Can I load paper elements? Yes. Just load it on your .js file with ES, CommonJS or AMD: import 'paper-input/paper-input.html';, require('paper-input/paper-input.html');, it will be ready for use on your page
Does this support ES2015/ES6 Yes. By default it uses babel on any module under app_modules
Under what directory should I store my code A directory named app_modules, this will act like if they were in node_modules or web_modules
How do I separate my app into multiple bundles Refer to the Samples
...sooo my gulp/grunt task manager? For the most not needed, use npm scripts to run commands npm run <command>

Suggested commands for package.json

"scripts": {
  ,"start"              : "live-server --path=./gui"
  ,"build"              : "node ./tools/build.js --od ./gui/artifacts"
  ,"build:some"         : "node ./tools/build.js --od ./gui/artifacts --sc some,maybeother"
  ,"build:help"         : "node ./tools/build.js --help"
  ,"build:profile"      : "node ./tools/build.js --od ./gui/artifacts --pf"
  ,"build:watch"        : "node ./tools/build.js --od ./gui/artifacts --w"
  ,"build:watch:dist"   : "node ./tools/build.js --od ./gui/artifacts --w --env prod --kl"
  ,"build:watch:css"    : "node ./tools/build.js --od ./gui/artifacts --w --env prod --smcss"
  ,"build:watch:raw"    : "node ./tools/build.js --od ./gui/artifacts --w --devtool="
  ,"build:debug"        : "node ./tools/build.js --od ./gui/artifacts --w --env prod --kl --sm"
  ,"build:debug:css"    : "node ./tools/build.js --od ./gui/artifacts --w --env prod --kl --sm --smcss"
  ,"build:dist"         : "node ./tools/build.js --od ./gui/artifacts --env prod"
  ,"sdk:link"           : "rimraf ./node_modules/websdk && cd ./node_modules && sudo cmd /c mklink /D websdk ..\\app_modules\\websdk"
  ,"deps"               : "npm list --depth=0"
  ,"git:nicer"          : "git config diff.submodule log"
}

Things to notice or not obvious in the samples

The build supports chunks by using build.extraConfig.websdk.lib = {name:'path'}
Chunks can be loaded async using <ensure-import name=""><component-toload></component-toload></ensure>
Changes to files take around one second since webpack only needs to do partial rebuilds when watching files
The build supports source maps and complete minification (should even work for HTML imports)

Published

Vulnerabilities

Links

Maintainers

Keywords