chrome/common/extensions/docs/templates/articles/app_codelab_import_todomvc.html - Issue 647763004: Clean-up Chrome Apps codelab.

Unified Diff: chrome/common/extensions/docs/templates/articles/app_codelab_import_todomvc.html

Issue 647763004: Clean-up Chrome Apps codelab. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 6 years, 2 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

« no previous file with comments | « chrome/common/extensions/docs/templates/articles/app_codelab_images.html ('k') | chrome/common/extensions/docs/templates/articles/app_codelab_intro.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: chrome/common/extensions/docs/templates/articles/app_codelab_import_todomvc.html

diff --git a/chrome/common/extensions/docs/templates/articles/app_codelab_import_todomvc.html b/chrome/common/extensions/docs/templates/articles/app_codelab_import_todomvc.html

index 9258d6254acc3169beead2c9210b547a451cb880..8d537378577aff1b77b874daf7c48fc3de7d42a7 100644

--- a/chrome/common/extensions/docs/templates/articles/app_codelab_import_todomvc.html

+++ b/chrome/common/extensions/docs/templates/articles/app_codelab_import_todomvc.html

@@ -13,7 +13,7 @@

<ul>

<li>How to adapt an existing web application for the Chrome Apps platform.</li>

<li>How to make your app scripts Content Security Policy (CSP) compliant.</li>

- <li>How to implement local storage using the <code>chrome.storage.local</code> API.</li>

+ <li>How to implement local storage using the <a href="/apps/storage" title="Read 'chrome.storage.local' in the Chrome developer docs">chrome.storage.local</a>.</li>

</ul>

@@ -24,8 +24,8 @@

<h2 id="todomvc">Import an existing Todo app</h2>

-As a starting point, we will import the <a href="http://todomvc.com/vanilla-examples/vanillajs/">vanilla

-JavaScript version</a> of <a href="http://todomvc.com/">TodoMVC</a>, a common benchmark app, into our project.

+As a starting point, import the <a href="http://todomvc.com/vanilla-examples/vanillajs/">vanilla

+JavaScript version</a> of <a href="http://todomvc.com/">TodoMVC</a>, a common benchmark app, into your project.

We've included a version of the TodoMVC app in the

<a href="https://github.com/mangini/io13-codelab/archive/master.zip">reference code zip</a> in the todomvc folder.

@@ -107,11 +107,11 @@ JavaScript and instead include js/bootstrap.js:

window.app = {};

</pre>

-You'll still have a non-working Todo app if you reload the app now but we're getting there.

+You'll still have a non-working Todo app if you reload the app now but you're getting closer.

<h2 id="convert-storage">Convert localStorage to chrome.storage.local</h2>

-If you open the DevTools Console now, the previous error should be gone. However there is a new error about <code>window.localStorage</code> not being available:

+If you open the DevTools Console now, the previous error should be gone. There is a new error, however, about <code>window.localStorage</code> not being available:

@@ -123,20 +123,21 @@ window.app = {};

-->

</figure>

-<a href="http://dev.w3.org/html5/webstorage/#the-localstorage-attribute"><code>LocalStorage</code></a>

-is not supported in Chrome Apps because <code>LocalStorage</code> is

-synchronous. Synchronous access to blocking resources (I/O) in a single threaded

-runtime could make your app become unresponsive.

+Chrome Apps do not support

+<a href="http://dev.w3.org/html5/webstorage/#the-localstorage-attribute"><code>localStorage</code></a>

+as <code>localStorage</code> is synchronous.

+Synchronous access to blocking resources (I/O) in a single-threaded runtime

+could make your app unresponsive.

Chrome Apps have an equivalent API that can store objects asynchronously.

This will help avoid the sometimes costly object->string->object serialization process.

-To address the error message in our app, we will need to convert <code>LocalStorage</code> to

-<code>chrome.storage.local</code>.

+To address the error message in our app, you need to convert <code>localStorage</code> to

+<a href="/apps/storage" title="Read 'chrome.storage.local' in the Chrome developer docs">chrome.storage.local</a>.

<h3 id="update-permissions">Update app permissions</h3>

-In order to use <code>chrome.storage.local</code>, we need to request the <code>storage</code> permission. In manifest.json, add <code>"storage"</code> to the <code>permissions</code> array:

+In order to use <code>chrome.storage.local</code>, you need to request the <code>storage</code> permission. In manifest.json, add <code>"storage"</code> to the <code>permissions</code> array:

"permissions": ["storage"],

@@ -144,9 +145,10 @@ This will help avoid the sometimes costly object->string->object serialization p

<h3 id="get-and-set">Learn about local.storage.set() and local.storage.get()</h3>

-To save and retrieve todo items, we'll need to know a bit about the <code>set()</code> and <code>get()</code> methods of the <code>chrome.storage</code> API.

+To save and retrieve todo items, you need to know about the <code>set()</code> and <code>get()</code> methods of the <code>chrome.storage</code> API.

-The <code>set()</code> method accepts an object of key-value pairs as its first parameter. An optional callback function is the second parameter. For example:

+The <a href="/apps/storage#method-StorageArea-set" title="Read 'chrome.storage.local.set()' in the Chrome developer docs">set()</a>

+method accepts an object of key-value pairs as its first parameter. An optional callback function is the second parameter. For example:

<pre>

chrome.storage.local.set({secretMessage:'Psst!',timeSet:Date.now()}, function() {

@@ -154,7 +156,7 @@ chrome.storage.local.set({secretMessage:'Psst!',timeSet:Date.now()}, function()

});

</pre>

-The <code>get()</code> method accepts an optional first parameter for the datastore keys you wish to retreive. A single key can be passed as a string; multiple keys can be arranged into an array of strings or a dictionary object.

+The <a href="/apps/storage#method-StorageArea-get" title="Read 'chrome.storage.local.get()' in the Chrome developer docs">get()</a> method accepts an optional first parameter for the datastore keys you wish to retreive. A single key can be passed as a string; multiple keys can be arranged into an array of strings or a dictionary object.

The second parameter, which is required, is a callback function. In the returned object, use the keys requested in the first parameter to access the stored values. For example:

@@ -173,7 +175,7 @@ chrome.storage.local.get(function(data) {

});

</pre>

-Unlike <code>localStorage</code>, you won't be able to inspect locally stored items using the DevTools Resources panel. However, you can interact with <code>chrome.storage</code> from the JavaScript Console like so:

+Unlike <code>localStorage</code>, you won't be able to inspect locally stored items using the DevTools Resources panel. You can, however, interact with <code>chrome.storage</code> from the JavaScript Console like so:

@@ -181,9 +183,9 @@ chrome.storage.local.get(function(data) {

<h3 id="preview-changes">Preview required API changes</h3>

-There are many remaining steps in converting the Todo app however they are all small changes to

-the API calls. Changing all the places where <code>localStorage</code> is currently being used

-will be time-consuming and error-prone — but required.

+Most of the remaining steps in converting the Todo app are small changes

+to the API calls. Changing all the places where <code>localStorage</code>

+is currently being used, though time-consuming and error-prone, is required.

To maximize your fun with this codelab, it'll be best if you overwrite your

@@ -197,7 +199,7 @@ will be time-consuming and error-prone — but required.

<ul>

<li>

- Instead of writing to <code>localStorage</code> using simple assignment, we need to use <code>chrome.storage.local.set()</code> with optional callbacks.

+ Instead of writing to <code>localStorage</code> using simple assignment, you need to use <code>chrome.storage.local.set()</code> with optional callbacks.

<pre>

var data = { todos: [] };

localStorage[dbName] = JSON.stringify(data);

@@ -212,7 +214,7 @@ chrome.storage.local.set( storage, function() {

</pre>

</li>

<li>

- Instead of accessing <code>localStorage[myStorageName]</code> directly, we need to use <code>chrome.storage.local.get(myStorageName,function(storage){...})</code> and then parse the returned <code>storage</code> object in the callback function.

+ Instead of accessing <code>localStorage[myStorageName]</code> directly, you need to use <code>chrome.storage.local.get(myStorageName,function(storage){...})</code> and then parse the returned <code>storage</code> object in the callback function.

<pre>

var todos = JSON.parse(localStorage[dbName]).todos;

</pre>

@@ -224,7 +226,7 @@ chrome.storage.local.get(dbName, function(storage) {

</pre>

</li>

<li>

- The use of <code>.bind(this)</code> is being used on all callbacks to ensure <code>this</code> refers to the <code>this</code> of the <code>Store</code> prototype. (More info on bound functions can be found on the MDN docs: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a>.)

+ The function <code>.bind(this)</code> is used on all callbacks to ensure <code>this</code> refers to the <code>this</code> of the <code>Store</code> prototype. (More info on bound functions can be found on the MDN docs: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a>.)

<pre>

function Store() {

this.scope = 'inside Store';

@@ -247,13 +249,15 @@ new Store();

</li>

</ul>

-Keep these key differences in mind as we go over retrieving, saving, and removing todo items in the following sections.

+Keep these key differences in mind as we cover retrieving, saving, and removing todo items in the following sections.

-<h3 id="retrieve-items">Retrieve todos items</h3>

+<h3 id="retrieve-items">Retrieve todo items</h3>

Let's update the Todo app in order to retrieve todo items:

-1. The <code>Store</code> constructor method takes care of initializing the Todo app with all the existing todo items from the datastore. If this is the first time the app has been loaded, the datastore might not exist so the method checks if the datastore exists first. If it doesn't, it'll create an empty array of <code>todos</code> and save it to the datastore so there are no runtime read errors.

+1. The <code>Store</code> constructor method takes care of initializing the Todo app with all the existing todo items from the datastore.

+The method first checks if the datastore exists.

+If it doesn't, it'll create an empty array of <code>todos</code> and save it to the datastore so there are no runtime read errors.

In js/store.js, convert the use of <code>localStorage</code> in the constructor method to instead use

<code>chrome.storage.local</code>:

@@ -445,11 +449,12 @@ Store.prototype.save = function (id, updateData, callback) {

<h3 id="complete-items">Mark todo items as complete</h3>

-Now that we are operating on arrays, we'll need to change how we handle a user clicking on the Clear completed (#) button:

+Now that app is operating on arrays, you need to change how the app handles a user clicking on the Clear completed (#) button:

1. In controller.js, update <code>toggleAll()</code> to call <code>toggleComplete()</code>

only once with an array of todos instead of marking a todo as completed

-one by one. Also delete the call to <code>_filter()</code> since we'll be adjusting <code>toggleComplete</code>'s <code>_filter()</code>.

+one by one. Also delete the call to <code>_filter()</code> since you'll be adjusting

+the <code>toggleComplete</code> <code>_filter()</code>.

Controller.prototype.toggleAll = function (e) {

@@ -471,7 +476,7 @@ Controller.prototype.toggleAll = function (e) {

};

</pre>

-2. Now we need to update <code>toggleComplete()</code> to accept both a single todo or an array of todos. This includes moving <code>filter()</code> to be inside the <code>update()</code>, instead of outside.

+2. Now update <code>toggleComplete()</code> to accept both a single todo or an array of todos. This includes moving <code>filter()</code> to be inside the <code>update()</code>, instead of outside.

Controller.prototype.toggleComplete = function (<strike>id</strike> ids, checkbox, silent) {

@@ -507,7 +512,7 @@ Controller.prototype.toggleComplete = function (<strike>id</strike> ids,

<h3 id="count-items">Count todo items</h3>

-After switching to async storage, there is a minor bug that shows up when getting the number of todos. We'll need to wrap the count operation in a callback function:

+After switching to async storage, there is a minor bug that shows up when getting the number of todos. You'll need to wrap the count operation in a callback function:

1. In model.js, update <code>getCount()</code> to accept a callback:

@@ -553,19 +558,19 @@ Controller.prototype._updateCount = function () {

};

</pre>

-We are almost there! If you reload the app now, you will be able to insert new

+You are almost there! If you reload the app now, you will be able to insert new

todos without any console errors.

<h3 id="remove-items">Remove todos items</h3>

-Now that we can save todo items, we're close to being done!

-However we get errors when we attempt to remove our todo items:

+Now that the app can save todo items, you're close to being done!

+You still get errors when you attempt to remove todo items:

</figure>

-1. In store.js, we'll need to convert all the <code>localStorage</code> instances to use <code>chrome.storage.local</code>:

+1. In store.js, convert all the <code>localStorage</code> instances to use <code>chrome.storage.local</code>:

a) To start off, wrap everything already inside <code>remove()</code> with a <code>get()</code> callback:

@@ -614,7 +619,7 @@ Store.prototype.remove = function (id, callback) {

</pre>

2. The same Read-After-Write data hazard issue previously present in the

-<code>save()</code> method is also present when removing items so we'll need

+<code>save()</code> method is also present when removing items so you will need

to update a few more places to allow for batch operations on a list of todo IDs.

a) Still in store.js, update <code>remove()</code>:

@@ -705,7 +710,7 @@ a fully working Chrome packaged version of TodoMVC.

Remember to always check the DevTools Console to see if there are any error messages.

-<h2 id="recap">Recap APIs referenced in this step</h2>

+<h2 id="recap">For more information</h2>

For more detailed information about some of the APIs introduced in this step, refer to:

@@ -724,12 +729,10 @@ a fully working Chrome packaged version of TodoMVC.

</li>

<li>

<a href="/apps/storage#method-StorageArea-get" title="Read 'chrome.storage.local.get()' in the Chrome developer docs">chrome.storage.local.get()</a>

- <a href="#get-and-set" class="anchor-link-icon" title="This feature mentioned in 'Learn about local.storage.set() and local.storage.get()'">↑</a>

</li>

<li>

<a href="/apps/storage#method-StorageArea-set" title="Read 'chrome.storage.local.set()' in the Chrome developer docs">chrome.storage.local.set()</a>

- <a href="/apps/storage#method-StorageArea-get" title="Read 'chrome.storage.local.get()' in the Chrome developer docs">chrome.storage.local.get()</a>

</li>

<li>