NotePad No More: A Personal Survey of HTML5

Developer Toolsets
Stewart Christie - Tizen and HTML5 Community Manager
@intel_stewart
HTML5 Developer Conference Oct 2013

Editor Wars.

Mat says:

January 22, 2012 at 12:17 pm

Way too complex, lots of useless tools.

A new developper only needs a linux, a vim and a FTP client.

Reply

Gene says:

January 23, 2012 at 1:03 am

Wow, now thats old school! What are you running that on, an Intel 486?

Reply

Notepad No More: HTML5 Toolsets.

@intel_stewart 10/22/13

Six systems tested.

Appery.io: Cloud based graphical drag and drop builder

Adobe Brackets/Edge and PhoneGap Build: Desktop with cloud build.
AppCeption:
AppCeption Cloud based, optional desktop editor integration
AppLaud:
AppLaud: Eclipse ADT plugin
Mosync Reload: Node based server, local editor
Intel XDK New: Hybrid system. Local install/edit. Cloud Build

Notepad No More: HTML5 Toolsets.

@intel_stewart 10/22/13

Some of these Apps are not like the others

Real App

Focus of today

Camera or Gallery
Standalone
Works offline

Consumption Apps

Portal Apps
Facebook or
Twitter
Front End to a service
or database

Notepad No More: HTML5 Toolsets.

@intel_stewart 10/22/13

Ereaders
likes

Comics
Often supplied by
content provider.

Appery.io CloudCloud-based Mobile App Builder

Free version One app at a
time, but few examples.
30 minutes from install to
running on device.
Very pointy clicky, no coding
needed?
Exporting this app ->153 files,
and 2566Kb.
APK file is 1.3Mb
Notepad No More: HTML5 Toolsets.

http://docs.appery.io/tutorials/using
-the-camera-component/

@intel_stewart 10/22/13

Appery.io CloudCloud-based Mobile App Builder

Free version One app at a
time, but few examples.
30 minutes from install to
running on device.
Very pointy clicky, no
coding needed?
Exporting this app ->153
files, and 2566Kb.
APK file is 1.3Mb
No Import Just Export
Notepad No More: HTML5 Toolsets.

@intel_stewart 10/22/13

AppLaud : Eclipse Plugin for Phonegap

Eclipse say no
more.
Android SDKs
used for
packaging.
Flexible, many
options.
http://www.mobiledevelopersolutions.com/

Great tutorials
and videos

Notepad No More: HTML5 Toolsets.

@intel_stewart 10/22/13

AppLaud:
AppLaud:
Easy for Eclipse Users to get started

Notepad No More: HTML5 Toolsets.

@intel_stewart 10/22/13

Eclipse Wizard for AppLaud

Options for Phonegap
Versions.
Options for User Interface
Options for demo, simple,
or imported projects.

Notepad No More: HTML5 Toolsets.

@intel_stewart 10/22/13

Fun with Eclipse.

10

Notepad No More: HTML5 Toolsets.

@intel_stewart 10/22/13

Mosync Reload
Private usage
For private use, the MoSync SDK and
MoSync Reload are completely free. Take
them, use them, have fun!
Commercial usage
If you want to sell the products you
make with the MoSync SDK and MoSync
Reload, or if you want to distribute those
products to other people outside or your
organization, you have one of two
options:
Be open source! Licence your source
code under GPL version 2, publish your
source code openly (or supply it to
others on demand), and keep our
copyright notices and the licenses in your
source files.

Notepad No More: HTML5 Toolsets.

www.mosync.com/reload
Notes:
Installation failed on my win7 system.
JS APIs are Phonegap compatible.
Uses Weinre for remote debug

@intel_stewart 10/22/13

Appception
Appception
Import AND Export of files, or
projects.
Use of Desktop Editor or Cloud
ACE/CodeMirror
Free Beta now. Free and Paid models
coming
Abug App for Android
Fastest from signup to photo: ~ 20
minutes.

http://www.appception.com
Notes:
Very new. 1st message on forum Oct 2nd 2013
Uses Weinre for remote debug
Cloud emulators use noVNC

Notepad No More: HTML5 Toolsets.

@intel_stewart 10/22/13

Appception:
Appception: Gui and Simulator

13

Notepad No More: HTML5 Toolsets.

@intel_stewart 10/22/13

AppCeption : Remote Debug Agent

Abug available for
Android.

14

Notepad No More: HTML5 Toolsets.

@intel_stewart 10/22/13

Adobe Edge, Brackets and Phonegap Build

PhoneGap plugin for Edge/Brackets is currently broken
Plugin installs.
Login works.
Existing PhoneGap Build projects visible.
Click rebuild and wait and wait
Rebuild is kicked off but Edge/Brackets hang.
15

Notepad No More: HTML5 Toolsets.

@intel_stewart 10/22/13

Intels XDK New: Hybrid Approach

Brackets, Ripple, Webkit and Cloud Build

http://software.intel.com/html5
16

Notepad No More: HTML5 Toolsets.

@intel_stewart 10/22/13

Intels XDK New: Hybrid Approach

Large selection of build targets.

Unique offerings

17

Notepad No More: HTML5 Toolsets.

@intel_stewart 10/22/13

The Proof Installed Apps

Atom based Android Apps.
Four Installed and working.

Photo taken with TizenGram

An HTML5 Git Hosted project.

Next steps
Try AppLaud in Tizen Eclipse IDE
Port TizenGram to Android
18

Notepad No More: HTML5 Toolsets.

@intel_stewart 10/22/13

Missing Features
Git Integration :
Project maintenance: eg moving a directory
Team features:
Export and Import standards
Tech Docs and Plugin/Extension APIs
Project files explanation
19

Notepad No More: HTML5 Toolsets.

@intel_stewart 10/22/13

Summary.
Multiple IDEs: a great way to mess up your PC.
Code sharing/Team Development:
Export only?

App Design Workflow:

Graphical<->code<->graphical: Holy Grail

No Silver Bullets yet.. Most system took 2-3 tries to work

20

Notepad No More: HTML5 Toolsets.

@intel_stewart 10/22/13

Want to try, or help?

HTML5 Hackathon Thu Fri at SFSU.
Sign up at HTML5 Dev Conf site.
Bring an Android phone or tablet and try these tools.
Or try porting one of these apps to Tizen.
$prizes$

21

Notepad No More: HTML5 Toolsets.

@intel_stewart 10/22/13

Thank You
Questions, and maybe answers.
Twitter -

@intel_stewart

Email Stewart.christie@intel.com
Today and Wed:- Intel Booth in Expo.
Thurs and Fri: Intel Hackathon at SFSU

Resources, links, and sites I like.

http://blog.elemdage.com/technology/one-mans-html5-developer-workflow https://twitter.com/gloparco

http://www.tricedesigns.com/2013/01/18/my-workflow-for-developing-phonegap-applications/ http://www.twitter.com/andytrice

http://www.applicationcraft.com/product/phonegap-mobile-build/ $14 per month 45 day free trial

http://www.feedhenry.com/how-to-get-started-building-apps/

http://paulbonmobile.wordpress.com/

https://groups.google.com/forum/#!forum/eclipse-plugin-for-phonegap

Intro: AppLaud Eclipse Plugin for PhoneGap / Android by Mobile Developer Solutions http://www.youtube.com/watch?v=mT02ytSSMII

PhoneGap_Full.avi (a Visual Studio demo of install and setup of PhoneGap 1.5.0 for Windows Phone)
http://www.youtube.com/watch?v=iQ4A5gxYG7M

23

Notepad No More: HTML5 Toolsets.

@intel_stewart 10/22/13

http://paulbonmobile.wordpress.com/
http://paulbonmobile.wordpress.com/
AppLauds Developer,

Several other cloud IDEs have recently emerged:

Some of the emerging solutions focused on mobile apps include:

akshell web app creation

FeedHenry Focusing on enterprise mobile apps with desktop emulation,

PhoneGap APIs, analytics

erbix JS App Editor ringo.js, an alternative server-side JavaScript

framework to node.js

Tiggr Graphical builder to create jQuery Mobile/PhoneGap apps with

REST service API builder

shiftEdit JavaScript/HTML/css with php including

a WYSIWYG/Design mode

AppMobi Desktop emulator, PhoneGap integration, app live update,

payments, authentication, push notification

Orion Eclipse-driven Web IDE that brings the Eclipse plug-in

philosophy to the web

EachScape Drag and Drop development, push notification, In-App

purchase

Neutron IDE - open source personal IDE

Application Craft - GUI builder, data connectors, PhoneGap Build

integration for deployment

jsfiddle JavaScript snippet execution

Appception weinre debugging, Android emulator

AppLaud Cloud (my product) PhoneGap, jQuery Mobile, Ripple

Emulator, weinre debugger, instantaneous device deployment

24

ideone multiple (>40) language snippet execution

Notepad No More: HTML5 Toolsets.

@intel_stewart 10/22/13

One More Resource Slide

http://dailytekk.com/2012/04/02/100-tools-to-develop-akiller-ios-or-android-app/

25

Notepad No More: HTML5 Toolsets.

@intel_stewart 10/22/13