当前位置: 首页 > 软件库 > 程序开发 > >

ember-app-shell

授权协议 MIT License
开发语言 JavaScript
所属分类 程序开发
软件类型 开源软件
地区 不详
投 递 者 赫连瑾瑜
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

ember-app-shell

ember-app-shell is built and maintained by DockYard, contact us for expert Ember.js consulting.

Renders an App Shell based on your actual running Ember.js application using Headless Chrome! It also inlines the relevant minimal CSS using the Critical tool.

How does this work?

Near the end of Ember CLI's build process, this addon loads your app in a Headless Chrome session and takes the rendered HTML and replaces index.html with the output of the /app-shell route. This way you are able to serve some static html before Ember boots up in the browser, but not having to maintain that manually in the index.html file.

See The App Shell Model on Google's Developer website for more information about what an App Shell is.

This addon is intended to be used with Ember Service Worker and the ember-service-worker-index addon.

Installation

ember install ember-app-shell

Make sure Google Chrome is installed on the build environment

You also need to make sure that every environment that will build your app runs Google Chrome (Canary).See the README of the chrome-launcher NPM package for more details on how to install Chrome on CI environments.

Export application global

To properly ensure app rendering of the app shell this addon makes use of Ember's visit API. To do this in all environments you mustconfigure your app to export its application global for all environments. By default, Ember does not do this in production.Read more about exporting your application's global.

Getting Started

This addon will visit /app-shell by default when the Ember app is built by Ember CLI, so we need to make sure that route exists. The easiest way is to generate one using Ember CLI:

ember generate route app-shell

Now let's assume your application.hbs and app-shell.hbs look like the following:

{{! application.hbs}}
<header>
  <h1>My App's Name</h1>
  <img src="/assets/images/logo.png" alt="My App's Name Logo">
</header>

<main>
  {{outlet}}
</main>
{{! app-shell.hbs}}
<div class="page-loading-spinner">
  <img class="loading-spinner" src="/assets/images/loading-spinner.gif" alt="loading...">
</div>

Then after building (e.g. ember build) the built index.html file (e.g. dist/index.html) will contain:

<div id="ember377" class="ember-view">
  <header>
    <h1>My App's Name</h1>
    <img src="/assets/images/logo.png" alt="My App's Name Logo">
  </header>

  <main>
    <div id="ember422" class="ember-view">
      <div class="page-loading-spinner">
        <img class="loading-spinner" src="/assets/images/loading-spinner.gif" alt="loading...">
      </div>
    </div>
  </main>
</div>

If you now open up your app in the browser, you'll see the app shell content until the Ember.js app renders.

Configuration

There are multiple things you can configure, here's an example of how it can look like:

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    'ember-app-shell': {
      visitPath: '/my-app-shell',
      outputFile: 'my-app-shell.html',
      // https://peter.sh/experiments/chromium-command-line-switches/
      chromeFlags: [],
      // https://github.com/addyosmani/critical#options
      criticalCSSOptions: {
        width: 1300,
        height: 900
      },
      // enabled: false  (if you want to disable it. You can also pass `APP_SHELL_DISABLED=true` when running `ember serve`)
    }
  });

  return app.toTree();
};

visitPath

This determines which route in your application is used to render the app shell. If you have your router configured with locationType: 'hash' then you might need to set visitPath: '/#/app-shell'.

Default: /app-shell.

outputFile

This determines where the App Shell file is written to in your build.Specifying index.html will overwrite the existing index.html.

Default: index.html

chromeFlags

Flags passed to chrome by chrome-launcher.

Default: []

criticalCSSOptions

The options passed to the critical module.

Default: { minify: true }

Troubleshooting

ember server fails to start

If ember server results in a long idle time followed by an error similar to this, try enabling adding --no-sandbox to the chromeFlags option.

Error: connect ECONNREFUSED 127.0.0.1:44625
    at Object._errnoException (util.js:1021:11)
    at _exceptionWithHostPort (util.js:1043:20)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1175:14)

This may be needed on certain UNIX systems, which need this flag as a workaround to get chrome headless running (see https://github.com/GoogleChrome/chrome-launcher/issues/6 and https://github.com/GoogleChrome/lighthouse/issues/2726).

Legal

DockYard, Inc. © 2017

@dockyard

Licensed under the MIT license

  • 英文原版:https://guides.emberjs.com/v2.13.0/tutorial/ember-data/ 截止到本章前,我们的app依然使用着定义在rentals路由模板中的硬编码租赁信息。为了能适应应用的不断增长,我们要考虑从远程服务器来动态的获取这些数据。并且要更进一步的增加应用使用时的灵活性,比如:根据条件筛选租赁信息。 Ember集成了一个叫 Ember Data 的数据管

 相关资料
  • ember-app-scheduler Ember batches DOM updates and paints them after every run loop to prevent layout thrashing. Layout thrashing can prevent a faster First Meaningful Paint (FMP) because all the conte

  • ember-web-app NOTICE: official repository moved to https://github.com/zonkyio/ember-web-app This Ember addon helps you configure and manage the web app manifest and related meta tags needed to create

  • 您可以配置Ember App和CLI以管理应用程序的环境。 环境配置文件将出现在config/environment.js 。 它包含以下代码结构 - module.exports = function(environment) { var ENV = { modulePrefix: 'query-params', //it is the name of application

  • ember-fastboot-app-tests This is an ember-cli addon that makes writing FastBoot tests for your Ember app easy and straightforward! It works by spinning up a local FastBoot server using ember-cli-fastb

  • Ember检查器是一个浏览器插件,用于调试Ember应用程序。 灰烬检查员包括以下主题 - S.No. 灰烬检查员方式和描述 1 安装Inspector 您可以安装Ember检查器来调试您的应用程序。 2 Object Inspector Ember检查器允许与Ember对象进行交互。 3 The View Tree 视图树提供应用程序的当前状态。 4 检查路由,数据选项卡和库信息 您可以看到检查

  • 英文原文: http://emberjs.com/guides/getting-ember/index/ Ember构建 Ember的发布管理团队针对Ember和Ember Data维护了不同的发布方法。 频道 最新的Ember和Ember Data的 Release,Beta 和 Canary 构建可以在这里找到。每一个频道都提供了一个开发版、最小化版和生产版。更多关于不同频道的信息可以查看博客