Ziro App

A Ziro Project

A web app development framework built on top of Netlify, Lambdas, LitElement, ZiroComponents, and ZiroState, and Rollup. It makes heavy use of web components, ES modules, and other browser native APIs including service worker and web manifest.

Checkout an documentation at ziro-app.alexlockhart.me and the the example at ziro-app-example.alexlockhart.me.

Local development

npm run serve

Open localhost:8888

Live development

npm run live

Open the url that the Netlify CLI gives. This allows you to develop and see your changes on a live URL, accessibly on the public internet. You can also share the given url with others so they can see your changes live.

Deploy

Update the service worker cache version number in src/sw.js and then push changes to the main branch.

Overview

The src/index.html file defines the initial page load and bootstraps the app The src/index.js file is only for adding new pages The src/index.css file let's you provide page level css The src/sw.js is your service worker The src/manigest.json is your web manifest The src/pages directory is for defining your page views The src/components directory lets you define reusable components. These components should be the only thing that connects to app state. the src/state directory lets you define your application state. The src/styles directory lets you define reusable styles. The src/assets directory lets you add static assets such as images The api directory lets you add Netlify Functions.

Main files

The main files are in the app directory. This includes the index.html file that will be served to the user which bootstraps the application and registers the service worker in sw.js. The app is defined in index.js. It also includes a top level CSS file in index.css which should hardly need used but is there if needed. Lastly, it includes the manifest.json file.

The index.js file is where the app is defined. This file can connect to the application state for doing high level application state such as dark mode, contrast mode, etc... but should not contain any feature logic, which should insted be encapsulated in a component.

Pages

The pages should not connect to the application state. Instead they should use components that connect to the application state. This is so that components can be moved around the site between pages without the state management needing to be reconfigured on a per page basis. The pages should simply handle the layout.

Components

These components should be reusable pieces of functionality. They can connect to the application state if needed but do not need to. This should be where most of the application logic should reside.

Styles

This is a set of files representing resuable styles such as for icons and buttons which can get imported into the components that need them. It also includes a variables file which should only need included in the index.js file. It also includes a globals.js file that can be included into every component. Lastly, it includes the color and contrast mode variables.

Icons

These are a set of reusable SVG icons.

State

This is where your application state objects are defined.

Assets

This is where images and other assets can be added.

API

The top level api directory is where you can add Netlify Functions.