未加星标

Build an Offline Demo of your Ember App with Ember CLI Mirage

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

Our client wanted a demo version of their Ember app to take to trade shows, use for sales demos, etc. Ideally, it would run on a laptop with no internet connection and not require the use of any developer tools. We decided to run the Ember app against a mocked backend.

Mirage

After briefly surveying available options for demo backends, we selected Ember CLI Mirage , for a couple reasons:

It runs entirely in the browser, with no actual server required. It doesn’t depend on Ember Data (which our app doesn’t use).

Alex and I spent a couple days spiking out whether it could do everything we needed, and then integrated it with our app. The documentation is pretty good, so I won’t go into all the setup. Instead, here are some highlights from our implementation.

Keep a Tidy Configuration

For starters, in order to isolate demo mode from our existing development , test , and production environments, we disabled mirage globally, and put its configuration behind an environment variable:

ENV['ember-cli-mirage'] = { enabled: false // off everywhere but demo }; if (process.env.DEMO_MODE) { ENV['ember-cli-mirage'] = { enabled: true }; ENV.APP.FEATURE_X = false; ENV.APP.FEATURE_Y = true; }

This enables us to run with DEMO_MODE=true ember server , or after placing the command in package.json’s scripts section, yarn demo .

Test It

We have Mirage disabled by default in our test environment in order to not interfere with our large suite of existing tests, but we start it manually for two new types of tests:

Demo Acceptance Tests: These click around the app as it runs against the mirage backend with its fixture data, proving that it works as desired.

Data Validation Tests: As the primary backend changes over time, demo mode’s fixture data could easily fall out of sync. To detect this granularly, we walk over all the demo data, serialize each record, and verify that it produces a valid client model. (We happen to havestrict models,generated from backend types.)

Rarely-used demonstration features can easily be neglected and rot; these tests will help protect ours from breaking as the rest of the app evolves.

Make a Portable Build

When configured correctly, an Ember app can run from disk, with no webserver required. It’s a little tricky to get routing and asset paths to work correctly with file:// URLs; here’s the magic incantation to drop in the demo config section:

ENV.rootURL = ''; ENV.locationType = 'hash'; rootURL “identifies the path at which an Ember application is served so Ember’s router can know which path segments to ignore.” locationType governs how Ember interacts with the browser URL.

You may find that these changes break some hardcoded <a href s, especially if they were pointing at routes within your app. Now’s a great time to switch them over to link-to , which references routes symbolically and is immune to these configuration changes.

With these in place, running a demo is as simple as double-clicking index.html!

Do More Cool Things

Relevant miscellany:

Hook into Pretender’s handledRequest to execute code on each request, but be warned that Mirage relies on it for logging . Add records “live” in the background with e.g. setInterval(() => server.create('record'), 25000); Deploy your demo build within your development build: ember build && DEMO_MODE=1 ember build --output-path dist/demo Use window.navigator.onLine to approximate whether the app is online, in order to handle special cases around other network dependencies. Create an electron app ! Try it Out!

I encourage you to try mirage in your Ember project, even if you have no need for an offline demo. It makes a pretty greatdevelopment API. The documentation is good, the maintainer is responsive, and the slack channel ( #ec-mirage on the Ember Community Slack ) has been very helpful.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: Slack
分页:12
转载请注明
本文标题:Build an Offline Demo of your Ember App with Ember CLI Mirage
本站链接:http://www.codesec.net/view/533124.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(67)