A Deep Dive into Enyo Ben Combee Developer Platform Architect, Enyo - - PowerPoint PPT Presentation

▶
a deep dive into enyo
SMART_READER_LITE
LIVE PREVIEW

A Deep Dive into Enyo Ben Combee Developer Platform Architect, Enyo - - PowerPoint PPT Presentation

Sep 17, 2023 363 likes •1.01k views

A Deep Dive into Enyo Ben Combee Developer Platform Architect, Enyo Team, HP ben.combee@palm.com @unwiredben on Twitter Thursday, May 31, 12 Thursday, May 31, 12 We need 500 apps for the TouchPad, stat! Thursday, May 31, 12 We want apps

slide-1
SLIDE 1

A Deep Dive into Enyo

Ben Combee Developer Platform Architect, Enyo Team, HP ben.combee@palm.com @unwiredben on Twitter

Thursday, May 31, 12

slide-2
SLIDE 2

Thursday, May 31, 12

slide-3
SLIDE 3

We need 500 apps for the TouchPad, stat!

Thursday, May 31, 12

slide-4
SLIDE 4

We want apps from devs that aren’t HTML+CSS experts.

Thursday, May 31, 12

slide-5
SLIDE 5

How?

Thursday, May 31, 12

slide-6
SLIDE 6

Components. As seen in Visual Basic. They’re not sexy. They work.

Thursday, May 31, 12

slide-7
SLIDE 7

Cross-platform: Desktop browsers. Mobile browsers. Apps.

Thursday, May 31, 12

slide-8
SLIDE 8

All source is on github.com/enyojs Apache 2.0 forever.

Thursday, May 31, 12

slide-9
SLIDE 9

Enyo 2.0: The Core Parts

Thursday, May 31, 12

slide-10
SLIDE 10

boot - load all the source

Thursday, May 31, 12

slide-11
SLIDE 11

/* package.js */ enyo.depends( “app.js”, “../css/app.css”, “$lib/onyx”);

Thursday, May 31, 12

slide-12
SLIDE 12

Thursday, May 31, 12

slide-13
SLIDE 13

kernel - OOP, there it is

Thursday, May 31, 12

slide-14
SLIDE 14

enyo.kind() is a constructor factory

Thursday, May 31, 12

slide-15
SLIDE 15

enyo.kind({ name: “FireFly”, kind: “TelevisionShow”, show: function() { this.inherited(arguments); system.play(“ObjectsInSpace.mp4”); } }); var ff = new FireFly(); // wait 10 weeks delete ff;

Thursday, May 31, 12

slide-16
SLIDE 16

enyo.Object provides property publishing

Thursday, May 31, 12

slide-17
SLIDE 17

enyo.kind({ name: “UPC”, kind: enyo.Object, published: { productID: “0000000000” }, create: function() {

  • this. productIDChanged();

}, productIDChanged: function(oldValue) { this.barcode = generate(this.productID); } });

Thursday, May 31, 12

slide-18
SLIDE 18

var x = new UPC({ productID: “123456789X” }); x.setProductID(“5678900002”); pID = x.getProductID();

Thursday, May 31, 12

slide-19
SLIDE 19

enyo.Component enables encapsulation and events

Thursday, May 31, 12

slide-20
SLIDE 20

enyo.kind({ name: “SithLord”, kind: “Jedi”, events: { onSpeak: “” }, scream: function(message) { doSpeak({ message: message, tone: “whiney” }); }) });

Thursday, May 31, 12

slide-21
SLIDE 21

enyo.kind({ name: “SithLords”, components: [ { kind: SithLord, name: “DarthVader”,

  • nSpeak: “listenToToys” },

{ kind: SithLord, name: “Palpatine” }, { kind: SithLord, name: “DarthSidious” } ], listenToToys: function(inSender, inEvent) { alert(inEvent.mesage); } });

Thursday, May 31, 12

slide-22
SLIDE 22

var toys = new SithLords; toys.$.DarthVader.setWeapon(lightsaber); toys.$.DarthVader.throw(toys.$.Palpatine); toys.$.DarthVader.scream(“NOOOOOOO!”);

Thursday, May 31, 12

slide-23
SLIDE 23

enyo.UIComponent provides hooks for layout control

Thursday, May 31, 12

slide-24
SLIDE 24

enyo.Signals is routing for app-level events

Thursday, May 31, 12

slide-25
SLIDE 25

lang.js - utilities log.js - logging job.js - setTimeout wrapper animation.js - math + reqFrame macroize.js - templates PhoneGap.js - app event support platform.js - platform-detection code

Thursday, May 31, 12

slide-26
SLIDE 26

dom - dealing with HTML

Thursday, May 31, 12

slide-27
SLIDE 27

enyo.Control: a rendering engine for HTML

Thursday, May 31, 12

slide-28
SLIDE 28

enyo.kind({ name: “BumperSticker”, kind: enyo.Control, tag: “div”, content: “I’m Fluent in JS!”, style: “color: blue; font-size: 96pt” }); var bs = new BumperSticker(); bs.renderInto(document.body);

Thursday, May 31, 12

slide-29
SLIDE 29

dispatcher.js: hooks all the standard DOM events into the Enyo event system

Thursday, May 31, 12

slide-30
SLIDE 30

enyo.kind({ name: “BumperSticker”, content: “I’m Fluent in JS!”, style: “color: blue; font-size: 96pt”, tap: function() { alert(“someone bumped me!”); } }); var bs = new BumperSticker(); bs.renderInto(document.body);

Thursday, May 31, 12

slide-31
SLIDE 31

ajax - data-access through XHR & JSONP

Thursday, May 31, 12

slide-32
SLIDE 32

function apiOK(inAsync, inValue) { alert( “success: “ + inValue ); } function apiFAIL(inAsync, inError) { alert( “FAIL: “ + inError ); } var a = new enyo.Ajax({ url: “http://example.org/api” }); a.response(apiOK); a.error(apiFAIL); a.go({ q: searchString });

Thursday, May 31, 12

slide-33
SLIDE 33

ui - building blocks for making themed widgets

Thursday, May 31, 12

slide-34
SLIDE 34

Button.js Checkbox.js Image.js Input.js Repeater.js RichText.js Select.js BaseLayout.js DragAvatar.js Group.js GroupItem.js Selection.js ToolDecorator.js

Thursday, May 31, 12

slide-35
SLIDE 35

touch - enyo.Scroller & touchscreen support

Thursday, May 31, 12

slide-36
SLIDE 36

enyo.Scroller handles showing 10 lbs of content in a 2 lb box with tweaks to scroll smoothly on modern browsers and touch screens

Thursday, May 31, 12

slide-37
SLIDE 37

The Layout Libraries

Thursday, May 31, 12

slide-38
SLIDE 38

fittable - responsive app layouts

Thursday, May 31, 12

slide-39
SLIDE 39

Thursday, May 31, 12

slide-40
SLIDE 40

list - optimized scrolling through 1000s of items

Thursday, May 31, 12

slide-41
SLIDE 41

Thursday, May 31, 12

slide-42
SLIDE 42

panels - configurable app layouts

Thursday, May 31, 12

slide-43
SLIDE 43

Thursday, May 31, 12

slide-44
SLIDE 44

tree - collapsable display of structure information

Thursday, May 31, 12

slide-45
SLIDE 45

Thursday, May 31, 12

slide-46
SLIDE 46

...and now, let’s introduce Onyx

Thursday, May 31, 12

slide-47
SLIDE 47

if enyo is jQuery (i.e. very useful by itself)

Thursday, May 31, 12

slide-48
SLIDE 48

then Onyx is our jQuery UI (a library that extends the core to do great things)

Thursday, May 31, 12

slide-49
SLIDE 49

CSS themes + JS behavior + composite controls

Thursday, May 31, 12

slide-50
SLIDE 50

Thursday, May 31, 12

slide-51
SLIDE 51

Button, Checkbox, Drawer, FlyweightPicker, Grabber, Groupbox, Icon, Input, Menu, Toolbar, Picker, Popup, ProgressBar, ProgressButton, RadioButton, RichText, Scrim, Slider, Spinner, SwipeableItem, TabPanels, TextArea, Tooltip Phew!

Thursday, May 31, 12

slide-52
SLIDE 52

Samples

Thursday, May 31, 12

slide-53
SLIDE 53

Onyx Sampler - live views of all Onyx controls & sample code enyojs.com/samples/onyxsampler

Thursday, May 31, 12

slide-54
SLIDE 54

Flickr Search - find pictures from search terms enyojs.com/samples/flickr

Thursday, May 31, 12

slide-55
SLIDE 55

Bing Maps - wraps external JS library with Enyo control enyojs.com/samples/maps

Thursday, May 31, 12

slide-56
SLIDE 56

API Viewer - pulls inline docs from source tree enyojs.com/api

Thursday, May 31, 12

slide-57
SLIDE 57

CryptoTweets - game using enyo & onyx & web services enyojs.com/samples/cryptotweets

Thursday, May 31, 12

slide-58
SLIDE 58

Community Gallery - listing of developer-contributed controls enyojs.com/gallery

Thursday, May 31, 12

slide-59
SLIDE 59

The Enyo Community

Thursday, May 31, 12

slide-60
SLIDE 60

Developer Forums - forums.enyojs.com Blog - blog.enyojs.com Twitter - @enyojs Email - enyojs@palm.com

Thursday, May 31, 12

slide-61
SLIDE 61

github - github.com/enyojs fork, modify, send us pretty pull requests submit components to the community gallery participate on the forums

Thursday, May 31, 12

slide-62
SLIDE 62

We’re hiring great JavaScript engineers. Know about cross-platform mobile web? Worked on your own frameworks? Talk to us! email enyojs@palm.com

Thursday, May 31, 12

slide-63
SLIDE 63

Thursday, May 31, 12