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
--profileand 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)