ZephJS aims to bring the promised ease of web components back to the community. It does so by living up to the following principles:
- 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.
ZephJS is often called just "Zeph" and pronounced "Zef".
ZephJS has the following features...
- Easily define Web Components;
- Extremely readable declarative syntax;
- Uses 100% Standard Browser APIs;
- Uses 100% Standard HTML, inline or separated;
- Uses 100% Standard CSS, inline or separated;
- Encapsulated styles 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 scaffolding;
- Included Bundler (using Rollup) to package into a single distributable;
- and ZephJS is under 20k minified!
ZephJS has four different use cases that are addressable as one gets started:
- Using a Web Component Library built on top of ZephJS;
- Building a Web Component Library on top of ZephJS;
- Building a Web Site with Custom Components using ZephjS;
- Building a Web Application using ZephJS.
Pick the best way to get started for you and start using ZephJS today!
ZephJS Provides a ton of documentation to help you use it...
- Component Quick Start Guide
- Component Concepts
- Creating a New Component
- Importing ZephJS
- Defining the Component
- Lifecycle Handlers
- Event Handlers
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:
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.
ZephJS ships with a set of examples for your reference.
BasicComponent: An example of a basic component.
HelloBadge: A slightly bigger example of a component which uses a second component.
ExampleCollection: An example of grouping several components together into a single file, called a collection.
ExampleService: An example of using the ZephService class to build a re-usable service.
RatingStars: An example of using resources and bundling.
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|
|Safari||10.1||:host and ::slotted psuedo-selectors are buggy.|
|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.|
|Blackberry Browser||NOT SUPPORTED||No support as ov v10.|
|Chrome for Android||71|
|Firefox for Android||64|
|IE Mobile||NOT SUPPORTED||No support as of v11|
|UC Browser for Android||11.8|
|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
This product is maintained and supported by The Awesome Engineering Company. For support please file an issue or contact us via our Webiste at https://awesomeeng.com. We will do our best to respond to you in a timely fashion.
ZephJS is released under the MIT License. Please read the LICENSE file for details.