2.0 KiB
2.0 KiB
Omi Snap - Snap template for Prerender
JavaScript Framework such as Omi shows nothing before JavaScript has done download. Thus, user sees a blank page in a while, and get bad User Experience. Omi Snap to resolve the issue, inject markup(HTML/CSS) in build so user can be seen UI contents while downloading JavaScript files, and get better User Experience.
Usage
$ npm i -g omi-cli # omi-cli install
$ omi init-snap myapp # create a omi-snap template using omi-cli
$ cd myapp
$ npm start # develop
$ npm run build # build a project - markup will be added automatically
What is a Snap(Prerender) ?
omi-cli create a default omi template, and HTML is a blank since all is rendered by JavaScript.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="./manifest.json">
<link rel="shortcut icon" href="./favicon.ico">
<title>Omi</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="./static/js/index.bb813127.js"></script>
</body>
</html>
so if you open a page, you can see a blank page before downloaded a JavaScript.
but omi-snap is using snap function adds markup(HTML/CSS), and generate HTML file so you can see contents.
You can see a template which is generated by a snap function. It has added a markup(HTML/CSS).
What is difference between Omi template and Omi Snap template
Omi Template
Omi Snap Template
