Skip to content
ZephJS is an easy, understandable, and ultra-light framework for defining and using Web Components.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
benchmark Performance tuning for element creation. Apr 8, 2019
bin Release v0.4.1. Mar 7, 2019
docs Release 1.2.0. Apr 13, 2019
examples Renames image() to asset() and adds support for audio and video. Apr 9, 2019
logos
src
test update tests. Apr 9, 2019
.eslintignore Fix linting error when linting *.min.js files. Apr 13, 2019
.eslintrc.js
.gitignore Further work on CLI tool. Bundling. Jan 25, 2019
CODE-OF-CONDUCT.md Adds community Code of Conduct. Feb 21, 2019
LICENSE
README.md Updated docs for new naming of asset(). Apr 9, 2019
RELEASE_NOTES.md
jsdoc.json API Documentation Update. Mar 20, 2019
package-lock.json
package.json Release 1.2.0. Apr 13, 2019
zeph.full.js
zeph.min.js

README.md

npm GitHub npm GitHub contributors GitHub last commit Twitter Follow
node GitHub issues Snyk Vulnerabilities for GitHub Repo Libraries.io dependency status for latest release

ZephJS

ZephJS is an easy, understandable, and ultra-light framework for defining and using Web Components. It is perfect for people writing component libraries, teams building applications or sites that just require a few custom components, or projects building whole applications that do not want all the weight of a modern JavaScript Browser framework. ZephJS simplifies the process of defining custom Web Components into a declarative highly readable structure that uses standard JavaScript, standard HTML markup, and standard CSS Styling.

ZephJS is often called just "Zeph" and pronounced "Zef".

Justification

The promise of Web Components was that one would be able to easily load a component onto a web page and use it. But to date that promise has largely not been realized. The current Web Components standards lack an implemented method for easily loading components or component libraries, and writing a web component in JavaScript is far from an easy or straight-forward task. Couple this with the current generation of web frameworks that add an insane amount of complexity to what was promised to be a very simple activity. Writing a web component should be simple, obvious, and require no more effort than writing JavaScript/HTML/CSS does.

ZephJS aims to bring the promised ease of web components back to the community. It does so by living up to the following principals:

  • Define new components simply in a readable, declarative manner.
  • Make it easy for a component or component library to be used by others.
  • Use the standards and technologies that have made the web great.
  • Never try to outwit the browser.
  • Keep it incredibly small and light.

Features

ZephJS has the following features...

  • Easily define Web Components;
  • Extremely readable declarative syntax;
  • Uses 100% Standard Browser APIs;
  • Uses 100% Standard JavaScript/ES2018;
  • Uses 100% Standard HTML, inline or separated;
  • Uses 100% Standard CSS, inline or separated;
  • Encapsulated stlyes and content do not leak;
  • Components can extend other components;
  • Value propagation via Attribute/Property/Content binding;
  • Supports building one-off components;
  • or Supports building component libraries;
  • or Supports building entire applications;
  • Included CLI for easy new component scafolding;
  • Included Bundler (using Rollup) to package into a single distributable;
  • and ZephJS is under 20k minified!

Get Started

ZephJS has four different use cases that are addressable as one gets started:

Pick the best way to get started for you and start using ZephJS today!

Additional Information

Documnetation

ZephJS Provides a ton of documentation to help you use it...

Getting Started

Components

Services

APIs

Bundling

Command Line Tool

Command Line Reference

ZephJS ships with a little command line tool (CLI) to help with your ZephJS related needs. This is installed locally when you install ZephJS via npm and can be accessed with the shell command zeph. It has the following syntax:

zeph <command>

There are a number of commands you can do. Very quickly:

  • hello: Generate the example hello world application.
  • create: Create a new component including .js, .html, and .css stub files.
  • serve: Run a small Web Server on http://localhost:4000 that will serve the current directory.
  • bundle: Bundle multiple ZephJS components into a single file.

For more information, see our documentation on the Zeph Command Line Interface.

Examples

ZephJS ships with a set of examples for your reference.

Browser Compatability

ZephJS is built on modern browser standards and thus requires a modern browser to work. In particular it requires the following Web Standards: Shadow DOM v1, Custom Elements v1, Mutation Observer, and Fetch.

The following browser compatability chart indicates which browsers are supported and which are not. (All browser statistics taken from caniuse.com and used under the conditions of thier license.)

Browser Minimum Required Version Notes
Firefox 63
Chrome 54
Safari 10.1 :host and ::slotted psuedo-selectors are buggy.
Opera 41
Microsoft Edge 15 (with Polyfill) Requires use of Polymer polyfill. See ZephJS Polyfill Documentation.
Microsoft Internet Explorer NOT SUPPORTED
IOS Safari 10.3 :host and ::slotted psuedo-selectors are buggy.
Android Browser 67
Blackberry Browser NOT SUPPORTED No support as ov v10.
Opera Mobile 46
Chrome for Android 71
Firefox for Android 64
IE Mobile NOT SUPPORTED No support as of v11
UC Browser for Android 11.8
Samsung Internet 6.2
QQBrowser NOT SUPPORTED No support as of v1.2
Baidu Browser NOT SUPPORTED No support as of v7.12
(Chart last updated Feb 25, 2019)

The Awesome Engineering Company

ZephJS is written and maintained by The Awesome Engineering Company. The Awesome Engineering Company believes in building clean, configurable, creative software for engineers and architects and customers.

To learn more about The Awesome Engineering Company and our suite of products, visit us on the web at https://awesomeeng.com.

Support and Help

If you need help working with ZephJS, please do not hesitate to reach out for help. Submit an issue with your help request and we will answer as quickly as we can!

Also, if you find any bugs or typos, please make sure to submit an issue as well.

License

ZephJS is released under the MIT License. Please read the LICENSE file for details.

You can’t perform that action at this time.