add omi-snap tutorial
This commit is contained in:
LeeHyungGeun
parent
b6453a4b30
commit
5aefe4b649
|
|
@ -0,0 +1,68 @@
|
|||
# Omi Snap - 做Prerender的Snap模版
|
||||
|
||||
诸如Omi之类的JavaScript框架在JavaScript下载之前没有显示任何内容。 因此，用户会在一段时间内看到空白页面，获得糟糕的用户体验。 Omi Snap解决了这个问题，在构建中加入了标记（HTML / CSS），因此用户可以在下载JavaScript文件时看到UI内容，从而获得更好的用户体验。
|
||||
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
```bash
|
||||
$ npm i -g omi-cli # 安装omi-cli
|
||||
$ omi init-snap myapp # 用omi-cli生成omi-snap模版
|
||||
$ cd myapp
|
||||
$ npm run build # 建立模版 - 自动加入标记
|
||||
```
|
||||
|
||||
## 什么是Snap(Prerender)？
|
||||
`omi-cli`创建一个默认的`omi`模板，HTML是一个空白，因为所有都是由JavaScript呈现的。
|
||||
|
||||
```html
|
||||
<!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>
|
||||
```
|
||||
|
||||
所以你打开页面的话，加载JavaScript文件之前会看到空的页面。
|
||||
|
||||
|
||||
|
||||
但，`omi-snap`是用snap功能加入标记(HTML/CSS)，然后产生HTML文件。所以你打开页面后至少可以看到基本的内容。
|
||||
|
||||
|
||||
|
||||
看如下照片，可以知道用snap生成的模版会有标记(HTML/CSS)。
|
||||
|
||||
|
||||
|
||||
## Omi模版和Omi Snap模版有什么区别
|
||||
|
||||
Omi模板
|
||||
|
||||
打开页面后只能看到空的页面，等几秒后才能看到内容。
|
||||
|
||||
|
||||
|
||||
Omi Snap模板
|
||||
|
||||
打开后，可以马上看到内容。
|
||||
|
||||
|
||||
|
||||
## 开始吧
|
||||
|
||||
[→ omi-snap Github](https://github.com/Tencent/omi/tree/master/packages/omi-snap)
|
||||
|
||||
[→ omi-snap template Github](https://github.com/omijs/template-snap)
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
# Omi Snap - Prerender를 위한 Snap 템플릿
|
||||
|
||||
Omi 와 같은 프레임워크를 사용하면 자바스크립트 파일이 로드되기 전 화면에는 아무것도 나타나지 않게 됩니다. 그래서 사용자는 잠시동안 아무것도 없는 하얀 화면을 보게 되고 나쁜 User Experience를 경험하게 됩니다. Omi Snap은 이런 부분을 해소하기위해 렌더할 HTML과 CSS를 빌드 단계에서 미리 HTML 파일에 삽입을 해줍니다. 해당 템플릿은 빌드시 흰 화면 대신 볼수 있는 UI를 삽입하기 때문에 보다 낫은 User Experience를 제공할수 있게 됩니다.
|
||||
Omi 와 같은 프레임워크를 사용하면 자바스크립트 파일이 로드전 화면에는 아무것도 나타나지 않게 됩니다. 그래서 사용자는 잠시동안 아무것도 없는 화면을 보게 되서 나쁜 User Experience를 경험하게 됩니다. Omi Snap은 이런 부분을 해소하기 위해 렌더할 마크업(HTML/CSS)를 빌드 단계에서 HTML 파일에 삽입을 해줍니다. 그래서 사용자는 빈 화면 UI를 보게 되기 때문에 보다 낫은 User Experience를 제공할수 있게 됩니다.
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -8,9 +8,9 @@ Omi 와 같은 프레임워크를 사용하면 자바스크립트 파일이 로
|
|||
|
||||
```bash
|
||||
$ npm i -g omi-cli # omi-cli 설치
|
||||
& omi init-snap myapp # omi-cli로 omi-snap 템플릿 생성
|
||||
& cd myapp
|
||||
& npm run build # 프로젝트 빌드 - 자동으로 snap기능 추가 되서 빌드됨
|
||||
$ omi init-snap myapp # omi-cli로 omi-snap 템플릿 생성
|
||||
$ cd myapp
|
||||
$ npm run build # 프로젝트 빌드 - 자동으로 snap기능 추가 되서 빌드됨
|
||||
```
|
||||
|
||||
## Snap(Prerender) 이란?
|
||||
|
|
@ -43,17 +43,17 @@ omi-cli로 템플릿을 생성하면 아래의 소스코드처럼 blank HTML을
|
|||
|
||||
|
||||
|
||||
아래의 이미지를 보면 위의 기존 템플릿과 다르게 아래의 snap기능을 사용하여 빌드한 마크업 에는 기본 CSS/HTML이 추가 되어있는 것을 확인할 수 있습니다.
|
||||
아래의 이미지를 보면 위의 기존 템플릿과 다르게 아래의 snap기능을 사용하여 빌드한 마크업 에는 기본 HTML/CSS이 추가 되어있는 것을 확인할 수 있습니다.
|
||||
|
||||
|
||||
|
||||
## omi 템플릿과 omi-snap 템플릿 비교
|
||||
## Omi 템플릿과 Omi Snap 템플릿 비교
|
||||
|
||||
omi 템플릿
|
||||
Omi 템플릿
|
||||
|
||||
|
||||
|
||||
omi-snap 템플릿
|
||||
Omi Snap 템플릿
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
# 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
|
||||
|
||||
```bash
|
||||
$ npm i -g omi-cli # omi-cli install
|
||||
$ omi init-snap myapp # create a omi-snap template using omi-cli
|
||||
$ cd myapp
|
||||
$ 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.
|
||||
|
||||
```html
|
||||
<!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
|
||||
|
||||
|
||||
|
||||
## Let's start
|
||||
|
||||
[→ omi-snap Github](https://github.com/Tencent/omi/tree/master/packages/omi-snap)
|
||||
|
||||
[→ omi-snap template Github](https://github.com/omijs/template-snap)
|
||||
Loading…
Reference in New Issue