1. a Framework for Building Native-Quality HTML5 apps that Run Everywhere Technical School Meet Enyo

2. What is Enyo Advantages of Enyo CONTENTS

3. 2 What is ?! Get Enyo Now

4. 3 webOS’s Features Web Based Luna Bus Node.js Enyo

5. 4 ’s History iOS, Android, Safari, Firefox, Chrome, IE8+ ’12, Jan Open Source – Apache 2.0 ’11, Feb HP Touch Pad only ’12, Jan Chrome(Android and iOS6) / Bootplate, Samples ’12, Oct Production Version ’12, Jul ’12, Nov Kindle Fire HD and IE10 TV UI(moonstone) into LGE ’14, Feb ’13, Mar

6. 5 Say Hello to World with jQuery Mobile Example Hello World!

7. 6 Say Hello to World with React var App = React.createClass({ displayName: 'App', render: function() { return React.DOM.div({className:'app'}, JQueryMobilePage({id:'Example'}, React.DOM.p(null, 'Hello World')) ); } }); App = React.createFactory(App);

8. 7 Say Hello to World with React var JQueryMobileHeader = React.createClass({ displayName: 'JQueryMobileHeader', render: function() { return React.DOM.div({'data-role':'header'}, React.DOM.h1(null, this.props.title) ); } }); JQueryMobileHeader = React.createFactory(JQueryMobileHeader);

9. 8 Say Hello to World with React var JQueryMobileContent = React.createClass({ displayName: 'JQueryMobileContent', render: function() { return React.DOM.div({role:'main', className:'ui-content'}, this.props.children); } }); JQueryMobileContent = React.createFactory(JQueryMobileContent);

10. 9 Say Hello to World with React var JQueryMobilePage = React.createClass({ getDefaultProps: function() { return {'data-role':'page'}; }, render: function() { var props = {}; for (var key in this.props) { props[key] = this.props[key]; } return React.DOM.div(props, JQueryMobileHeader({title: this.props.id}), JQueryMobileContent(null, this.props.children) ); } }); JQueryMobilePage = React.createFactory(JQueryMobilePage); ReactDOM.render(App(null), document.getElementById('content'));

11. new Ext.Application({ launch: function() { new Ext.Toolbar({ dock: 'top', title:'Example' }); new Ext.Panel({ fullscreen: true, html: 'Hello world' }); } }); 10 Say Hello to World with Sencha Touch

12. 11 Say Hello to World with enyo.kind({ name: "App", kind: "FittableRows", components:[ {kind: "onyx.Toolbar", content: "Example"}, {name: "main", content:"Hello, World"}, ]}); new App().renderInto(document.body);

13. 12 General Information of JavaScript Framework ENYOJQuerySencha(EXT)ANGULARJS SIZE 25 KB (core gzipped) 32 KB (minified & gzipped) 84–502 KB 36 KB (minified & ompressed) LICENSEAPACHE 2MITGPLMIT DIFFICULTY Beginner /Advanced BeginnerAdvanced PATTERNMVCPLUG-INMVC/MVVM Template- Controller-Model AJAXYES PROGRAMMING PARADIGM Object-oriented Event-driven PLUG-IN Class-based programming Object-oriented Functional Event-driven

14. 13 Advantages of EASY to START : Bootplate, JavaScript Based, UI Libraries EASY to USE : Object Oriented, Variable, Event EASY to EXTEND: Kind, Theme

15. 14 Bootplate Do git clone and get Template.

16. 15 Bootplate Please download… http://

17. 16 Enyo-dev npm installl will be supported.

18. 17 JavaScript Based Shows as You Think. Type JavaScript Codes, then

19. 18 Markup Based Type Markups and Styles, then What You Typed Shows as You Typed.

20. 19 Onyx and Moonstone

21. 20 Object Oriented EASILY DECLARE EASILY INHERITE

22. 21 Object Oriented HOW TO DECLARE

23. 22 Object Oriented JSON enyo.kind({ name: "myapp.MainView", kind: "FittableRows", fit: true, components:[ {kind: "onyx.Toolbar", content: "Hello World"}, {kind: "enyo.Scroller", fit: true, components: [ {name: "main", classes: "nice-padding", allowHtml: true} ]}, {kind: "onyx.Toolbar", components: [ {kind: "onyx.Button", content: "Tap me", ontap: "helloWorldTap"} ]} ], helloWorldTap: function(inSender, inEvent) { this.$.main.addContent("The button was tapped. "); } });

24. 23 enyo.depends /source/package.js enyo.depends( // Layout library "$lib/layout", // Onyx UI library "$lib/onyx", // To theme Onyx using Theme.less, // change this line to $lib/onyx/source, // CSS/LESS style files "style", // Model and data definitions "data", // View kind definitions "views", // Include our default entry point "app.js“ );

25. 24 enyo.kind /source/views/views.js enyo.kind({ name: "myapp.MainView", kind: "FittableRows", fit: true, components:[ {kind: "onyx.Toolbar", content: "Hello World"}, {kind: "enyo.Scroller", fit: true, components: [ {name: "main", classes: "nice-padding", allowHtml: true} ]}, {kind: "onyx.Toolbar", components: [ {kind: "onyx.Button", content: "Tap me", ontap: "helloWorldTap"} ]} ], helloWorldTap: function(inSender, inEvent) { this.$.main.addContent("The button was tapped. "); } });

26. 25 new & renderInto /source/app.js enyo.kind({ name: "myapp.Application", kind: "enyo.Application", view: "myapp.MainView“ }); enyo.ready(function () { new myapp.Application({name: "app"}); }); new myControl().renderInto(document.body);

27. 26 Object Oriented HOW TO INHERITE

28. 27 Object Oriented KIND enyo.kind({ name: "circle.Toolbar", kind: "onyx.Toolbar", style: "padding-left: 98px;“ });

29. 28 Object Oriented KIND enyo.kind({ name: "myapp.Circle.MainView", kind: "myapp.MainView", components:[ { kind: "circle.Toolbar", content: "Hello World"}, {kind: "enyo.Scroller", fit: true, components: [ {name: "main", classes: "nice-padding", allowHtml: true} ]}, { kind: "circle.Toolbar", components: [ {kind: "onyx.Button", content: "Tap me", ontap: "helloWorldTap"} ]} ] });

30. 29 Variable EASILY ACCESS EASILY OBSERVE

31. 30 Variable HOW TO ACCESS { name: "myapp.MainView“, components:[ {kind: "onyx.Toolbar"}, { kind: "enyo.Scroller", components: [ {name: "main"} ] }, { kind: "onyx.Toolbar", components: [ {kind: "onyx.Button"} ] } ],

32. 31 Variable $ helloWorldTap: function(inSender, inEvent) { this. $. main.addContent("The button was tapped. "); }

33. 32 Variable HOW TO ACCESS { name: "myapp.MainView“, components:[ {kind: "onyx.Toolbar"}, { kind: "enyo.Scroller", components: [ {name: "main"} ] }, { kind: "onyx.Toolbar", components: [ {kind: "onyx.Button"} ] } ],

34. 33 Variable this.cout & this.$.main enyo.kind({ name: "myapp.Circle.MainView", kind: "myapp.Circle.MainView", count : 0, helloWorldTap: function(inSender, inEvent) { this.count++; this.$.main.setContent(this.count +" tapped. "); } });

35. 34 Variable HOW TO OBSERVE : PUBLISHED enyo.kind({ name: "myapp.Counter.MainView", kind: "myapp.Circle.MainView", published : { count: 0 }, helloWorldTap: function(inSender, inEvent){ this.setCount(this.getCount()+1); this.$.main.setContent(this.count +" tapped. "); }, countChanged : function (previous, current, property){ console.log("previous : " + previous + " | current : " + current + " | property : " + property ); } });

36. 35 Variable HOW TO OBSERVE : PUBLISHED previous : 0 | current : 1 | property : count previous : 1 | current : 2 | property : count previous : 2 | current : 3 | property : count previous : 3 | current : 4 | property : count previous : 4 | current : 5 | property : count previous : 5 | current : 6 | property : count previous : 6 | current : 7 | property : count previous : 7 | current : 8 | property : count

37. 36 Variable EASILY HANDLE EASILY DEFINE

38. 37 Variable HOW TO HANDLE : HANDLERS enyo.kind({ name: "myapp.UserEvent.MainView", kind: "myapp.Counter.MainView", events : { onMyEvent : "“ }, handlers : { ontap : "handleTap", onMyEvent : "handleMyEvent“ }, handleTap: function (inSender, inEvent) { console.log('handleTap is called'); this.doMyEvent({content: "User Event is triggered."}) }, handleMyEvent: function (inSender, inEvent) { console.log('handleMyEvent is called'); console.log(inEvent.content); } });

39. 38 Variable HOW TO DEFINE : EVENTS enyo.kind({ name: "myapp.UserEvent.MainView", kind: "myapp.Counter.MainView", events : { onMyEvent : "“ }, handlers : { ontap : "handleTap", onMyEvent : "handleMyEvent“ }, handleTap: function (inSender, inEvent) { console.log('handleTap is called'); this.doMyEvent({content: "User Event is triggered."}) }, handleMyEvent: function (inSender, inEvent) { console.log('handleMyEvent is called'); console.log(inEvent.content); } });

40. 39 Kind EASILY RE-USE EASILY RE-DEFINE

41. 40 Kind HOW TO KIND? enyo.kind({ name: "circle.MainView", kind: "myapp.MainView", classes : "main-view" }); enyo.kind({ name: "circle.Toolbar", kind: "onyx.Toolbar", style: "padding-left: 98px;“ }); enyo.kind({ name: "circle.main", style: "padding-left: 98px;", allowHtml: true }); enyo.kind({ name: "square.MainView", kind: "myapp.MainView“ }); enyo.kind({ name: "square.Toolbar", kind: "onyx.Toolbar“ }); enyo.kind({ name: "square.main", classes: "nice-padding", allowHtml: true });

42. 41 Theme EASILY CHANGE EASILY MAINTAIN

43. 42 Theme CIRCLE??

44. 43 Theme USE CIRCLE SERIES enyo.kind({ name: "myapp.Circle.MainView", kind: "myapp.MainView", classes : "main-view", components:[ {kind: "circle.Toolbar", content: "Hello World"}, {kind: "enyo.Scroller", fit: true, components: [ {name: "main", kind: "circle.main" } ]}, {kind: "circle.Toolbar", components: [ {kind: "onyx.Button", content: "Tap me", ontap: "helloWorldTap"} ]} ] });

45. 44 Theme CIRCLE!!Square??

46. 45 Theme USE THEME enyo.kind({ name: "myapp.Theme.MainView", kind: "enyo. Theme.MainView", components:[ {kind: "enyo. Theme.Toolbar", content: "Hello World"}, {kind: "enyo.Scroller", fit: true, components: [ {name: "main", kind:"enyo. Theme.main"} ]}, {kind: "enyo. Theme.Toolbar", components: [ {kind: "onyx.Button", content: "Tap me", ontap: "helloWorldTap"} ]} ] });

47. 46 Theme REMEMBER? enyo.kind({ name: "circle.MainView", kind: "myapp.MainView", classes : "main-view" }); enyo.kind({ name: "circle.Toolbar", kind: "onyx.Toolbar", style: "padding-left: 98px;“ }); enyo.kind({ name: "circle.main", style: "padding-left: 98px;", allowHtml: true }); enyo.kind({ name: "square.MainView", kind: "myapp.MainView“ }); enyo.kind({ name: "square.Toolbar", kind: "onyx.Toolbar“ }); enyo.kind({ name: "square.main", classes: "nice-padding", allowHtml: true });

48. 47 Theme USE THEME enyo.registerTheme(square); enyo.theme <= square enyo.Theme.MainView enyo.Theme.Toolbar enyo.Theme.main square.MainView square.Toolbar square.main

49. 48 Theme USE THEME enyo.registerTheme(circle); enyo.theme <= circle enyo.Theme.MainView enyo.Theme.Toolbar enyo.Theme.main circle.MainView circle.Toolbar circle.main

50. 49 Develop Applications Easily with.