@maxlmore/design-library v0.0.20

Demo Project for hska university

This project contains a demonstration of the StencilJS Compiler.

Prerequisites

• NodeJS
• npm
• Chrome

Running the project

Running the dev server will show you an interactive demo of stencil and the way, components are build using Native Web Components and the stencil compiler. To get started, execute in a terminal:

npm i
npm start

This will open the dev server at port 3333 and show you a demonstration of building web components with stencil.

Framework integrations

Static Site Generation

Stencil supports SSG by prerendering one or more routes of the website and serving them as static sites, before additional javascript will be loaded asynchronosly. This is different from Server Site Rendering, because the pages are compiled at build time, and not at runtime.

You can build a prerenderer version of your site by executing

stencil build --prerender

which will build the app into the www directory.

To evaluate performance, the main page of this project (that is used to demonstrate all the stencil components) is once called using http://localhost:3333/ and once using the index.html that was created using static site generation.

Even though the comparison isn't completely fair, because on page is server from a server and one from disk, you can see the amount of time that is lost due to scripting. When using stencils SSG, all necessary javascript will be loaded asynchronisly after the page has successfully renderer its first paint.