using javascript to build html5 tools (ian maffett)
DESCRIPTION
Taken from the Future of Web Apps Boston (http://futureofwebapps.com/boston-2014) In this session, Ian will discuss the tools and frameworks that the HTML5 tools team at Intel are using. RequireJS, Backbone, Angular, jQuery, Mocha, Grunt and the list goes on. You will learn some tips and tricks to help power your next mega full page web app, desktop application, or hybrid application.TRANSCRIPT
Future of ApplicationsIan Maffett – Intel Software Engineer
October 28, 2014
FOWA Boston
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
HTML5 Team & the Intel® XDK
Tools we use and why
Tips/Tricks
Final thoughts
2
Overview
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
The HTML5 Tools team is part of the Software Services Group
division (SSG).
SSG employs thousands of developers who work on projects such
as Android, the Linux Kernel and compilers
HTML5 team focuses on runtimes, code optimizations, and tools.
Intel® XDK is a tool to build cross platform mobile applications
(Cordova) without any native SDKS.
MASSIVE single page application.
(most of our team had never wrote a web app before)
3
HTML5 team
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
The HTML5 team has developers in the following locations
Lancaster, PA
Hillsborough, OR
Santa Clara, CA
Cordoba, Argentina
Novosibirsk, Russia
Hudson, MA
Merrimack, NH
China
4
Developers spread worldwide
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
5
Intel® XDK – build cross platform hybrid
applications
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
Quick demo of the Intel® XDK
6
Intel® XDK Flyby
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
Tools used to build the Intel® XDK
7
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
8
(how many logos can we fit)?
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
Chromium up front, node in the back. Node Webkit allows us to
distribute specific versions without requiring the user to install
anything. Used in apps like Popcorntime and Phonegap Desktop
Single threaded process. This causes problems with the
emulator. Users code could hang the XDK with a synchronous
script load. Had to change to client/server mentality.
Check it out - https://github.com/rogerwang/node-webkit
9
A desktop app that’s really a web app.
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
10
Q.js / Promises (breaking callback hell)
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
Client is built using Backbone and jQuery. We use RequireJS to
load our components in our application.
Initial architects created base developer guidelines. *ALWAYS*
have one in place when starting a new project. Half the team had
never written a web app before.
Component based – each component is its own entity, but may
need to listen to other components for events (like project
changed).
Components have their own dependencies too.
App Designer – uses Angular/LESS.js
11
Front side: Backbone, jQuery and RequireJS
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
12
Components loaded asynchronously
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
Normal “backend” server
Client code makes calls via HTTP to “server” components
Great for us to write JS for everything.
Tests created using Mocha and run by the CI server (and
developer)
UserFS – wrapper to various file systems (native, s3, etc)
We were writing the XDK to work on the desktop and “cloud”
Growing pains trying to re-implement an FS.
Still use some NodeWebkit “magic” for gathering server side
objects that developers can use CDT to inspect.
13
Server Components (node modules)
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
Register components from package.json (it is a Node app)
Wrap server side component calls through a proxy function
- “local” – direct access through Node Webkit
- “browser” – make calls via HTTP Request
Devs run in “local” mode for server side debugging in CDT.
Switch to “browser” to test installed versions.
14
NW Magic
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
Components
Client
Emulator
emulator.js
emulator.css
Server
Emulator
emulator-webserver.js (web server)
emulator-notification.js (replicate push notifications)
15
Component folder structure (example)
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
16
We almost wrecked the original groundwork.
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
Adopted Google’s JS style guideline (for the most part).
Mocha tests for server side.
Selenium for Client side – created user tests and end to end (E2E)
tests for Windows, Mac and Linux.
JIRA for bug tracking
Crucible for code reviews (which ties into JIRA)
Team City for CI/builds
Daily emails about commits/builds
UI Style guidelines
17
JSHint, Mocha, Selenium and CI to the
rescue.
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
If you’ve configured your git hooks properly we have scripts to run
before the push. These check node modules, commit messages,
will run jshint, etc.
CI server will run throughout the day and run tests/jshint.
Create a code review if needed.
CI server kicks off daily build kits which then goes through Q/A
Grunt used to run tests locally and also create our install kits
(minification, concatenation, etc)
18
When a developer commits…
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
Tips/tricks/thoughts
19
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
20
Memory becomes an issue
The browser is not reloaded, so you must manage events
properly.
Using established libraries can help with cleaning up orphaned
children.
CDT has great tools for tracking down performance issues.
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
21
Focus on UX (versus regular web)
Don’t be slower then a full page reload.
Make the app snappy and fluid.
Watch flash of content on repaints.
Remember browser performance of desktop, mobile and other
devices.
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
22
Pick the best tools for the project
Don’t start a massive new project just because you want to use
tool XYZ.
Introduce new tools/frameworks on new functionality that can be
separated.
* With the XDK being component based, we are testing React.js in
Brackets and Polymer in the core UI framework.
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
23
Web apps are so much more these days
Desktop apps
Mobile apps
Websites
Intranets
Portals
IoT companion apps
In Vehicle Infotainment apps (IVI)
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
24
Not Invented Here syndrome
This can kill your project. Use existing tools to help scale your
development cycle.
Also for UI/UX* - Use existing frameworks and tools.
*Do invent and share your own projects. There is a thriving
community right now around JavaScript; join and participate.
That’s why we are here today.
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
25
Popcorn time (Desktop/Mobile)
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
26
IoT Companion app
http://xdk-
software.intel.com/iot_edition_demo_video/
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
27
Desktop/Mobile websites
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
28
Tizen IVI
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
Questions/comments?
[email protected]@imaffett
29
Copyright © 2014, Intel Corporation. All rights reserved. *Other names and brands may be claimed as the property of others.Optimization Notice
Legal Disclaimer & Optimization Notice
INFORMATION IN THIS DOCUMENT IS PROVIDED “AS IS”. NO LICENSE, EXPRESS OR IMPLIED, BY ESTOPPEL
OR OTHERWISE, TO ANY INTELLECTUAL PROPERTY RIGHTS IS GRANTED BY THIS DOCUMENT. INTEL
ASSUMES NO LIABILITY WHATSOEVER AND INTEL DISCLAIMS ANY EXPRESS OR IMPLIED WARRANTY,
RELATING TO THIS INFORMATION INCLUDING LIABILITY OR WARRANTIES RELATING TO FITNESS FOR A
PARTICULAR PURPOSE, MERCHANTABILITY, OR INFRINGEMENT OF ANY PATENT, COPYRIGHT OR OTHER
INTELLECTUAL PROPERTY RIGHT.
Software and workloads used in performance tests may have been optimized for performance only on Intel
microprocessors. Performance tests, such as SYSmark and MobileMark, are measured using specific computer
systems, components, software, operations and functions. Any change to any of those factors may cause the results to
vary. You should consult other information and performance tests to assist you in fully evaluating your contemplated
purchases, including the performance of that product when combined with other products.
Copyright © 2014, Intel Corporation. All rights reserved. Intel, Pentium, Xeon, Xeon Phi, Core, VTune, Cilk, and the Intel
logo are trademarks of Intel Corporation in the U.S. and other countries.
Optimization Notice
Intel’s compilers may or may not optimize to the same degree for non-Intel microprocessors for optimizations that are
not unique to Intel microprocessors. These optimizations include SSE2, SSE3, and SSSE3 instruction sets and other
optimizations. Intel does not guarantee the availability, functionality, or effectiveness of any optimization on
microprocessors not manufactured by Intel. Microprocessor-dependent optimizations in this product are intended for
use with Intel microprocessors. Certain optimizations not specific to Intel microarchitecture are reserved for Intel
microprocessors. Please refer to the applicable product User and Reference Guides for more information regarding the
specific instruction sets covered by this notice.
Notice revision #20110804
30