Building Hybrid Apps with Ember

•

11 likes•6,351 views

Presented at HoustonJS http://www.meetup.com/houston-js/events/203757092/ On the fence about building hybrid apps? Let me convince you to take the leap. I’ll discuss the process we use at Poetic Systems and demonstrate with a live coding example.

Software

Photo © 2012 J. Ronald Lee. jronaldlee.com Why?

It’s the Future http://1.bp.blogspot.com/_RHK3n3Uireo/TEUDDQK0Y4I/AAAAAAAAAR4/7g3a7t2xQ1s/s1600/destination_moon3.jpg

Native
Android: RelativeLayout
iOS: UINavigationBar
Walmart Amazon Instagram

Native
Android: TabHost
iOS: UITabBar
Walmart Amazon Instagram

Native
Android: ListView
iOS: UITableView
Walmart Amazon Instagram

Hybrid
Sticky Header
Worth It EventAssist BeautyNow

Hybrid
Sticky Footer
Worth It EventAssist BeautyNow

Hybrid
html UL
Worth It EventAssist BeautyNow

Hybrid
html UL, DIV
Worth It EventAssist BeautyNow

Hybrid
html UL, DIV, SPANs?
Worth It EventAssist BeautyNow

Hybrid
html UL, DIV, SPANs?
WHATEVER
Worth It EventAssist BeautyNow

html UL, DIV, SPANs? CSS
Hybrid
Worth It EventAssist BeautyNow

Why? Recap
• Cross Platform
• Web
• Easy & Fast
• The Future

I’m a framework
http://carefullycrafted.net/images/Ember.js_Logo_and_Mascot.png

I’m a framework
It’s lonely out here.
In Defense of Frameworks - http://youtu.be/jScLjUlLTLI
http://carefullycrafted.net/images/Ember.js_Logo_and_Mascot.png

Cordova
Web to Native
http://wpmedia.digitoffee.com//2014/02/PhoneGapLogo.png
http://cordova.apache.org/images/cordova_bot.png

http://wpmedia.digitoffee.com//2014/02/PhoneGapLogo.png
http://cordova.apache.org/images/cordova_bot.png
Cordova

ember-cli
http://thau.me/wp-content/uploads/2014/01/tomster-under-construction.png

ember-cli
& ember-cli-cordova
http://thau.me/wp-content/uploads/2014/01/tomster-under-construction.png

Tooling Recap
• Ember
• Cordova
• ember-cli
• ember-cli-cordova

Thanks, Questions?
@jakecraige https://github.com/jakecraige/ordrr

What's hot

Using HTML5 to Build Mobile AppsTodd Anglin

Ionic frameworkSoftware Infrastructure

Mobile Information ArchitectureChristian Crumlish

Ecommerce Mini Project / Group Project CodingHemant Sarthak

Building Browser Extensions with EmberAlex Blom

Ionic FrameworkCristián Cortéz

Hybrid Apps with Ionic FrameworkBramus Van Damme

Adobe and Modern Web DevelopmentTerry Ryan

WebDU KeynoteTerry Ryan

AngularJS on Mobile with the Ionic FrameworkTroy Miles

The Future of HTML5 Motion DesignTerry Ryan

"Native" Apps with APEX and PhoneGapChristian Rokitta

Typescript 102 angular and type scriptBob German

Cross Platform Mobile Apps with the Ionic FrameworkTroy Miles

Hybrid mobile and IonicLiju Pillai

Building a mobile app connected to WordPress with WP-AppKitBenjamin LUPU

Debugging Web Apps on Real Mobile DevicesDale Lane

Extending, optimizing, and accelerating Xamarin and Xamarin.Forms app develop...James Montemagno

Progressive Web AppsOptis

Creating mobile apps - an introduction to Ionic (Engage 2016)Mark Leusink

What's hot (20)

Using HTML5 to Build Mobile Apps

Ionic framework

Mobile Information Architecture

Ecommerce Mini Project / Group Project Coding

Building Browser Extensions with Ember

Ionic Framework

Hybrid Apps with Ionic Framework

Adobe and Modern Web Development

WebDU Keynote

AngularJS on Mobile with the Ionic Framework

The Future of HTML5 Motion Design

"Native" Apps with APEX and PhoneGap

Typescript 102 angular and type script

Cross Platform Mobile Apps with the Ionic Framework

Hybrid mobile and Ionic

Building a mobile app connected to WordPress with WP-AppKit

Debugging Web Apps on Real Mobile Devices

Extending, optimizing, and accelerating Xamarin and Xamarin.Forms app develop...

Progressive Web Apps

Creating mobile apps - an introduction to Ionic (Engage 2016)

Similar to Building Hybrid Apps with Ember

Alex jubien-think mobileApp Promotion Summit Conference

Leading Enterprise Innovation at Startup SpeedAmazon Web Services

Benvenuti nella “API Economy”Codemotion

從 Google i/o 2015 看下半年 mobile 應用發展趨勢Ascii Huang

Hybrid application developmentKnoldus Inc.

From mobile browser to mobile appRyan Stewart

Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…Atwix

Deep linking at App Promotion SummitAlexandre Jubien

Harness the power of wordpressJustin Ferrell

Beyond being responsive, a mobile first strategyinternet-inspired

How App Indexation WorksSerenaPearson2

Responsive DesignSara Cannon

Responsivedesign slides2-120507173812-phpapp01Innovation Excellence

Mobile web apps here and now!Alexander Gyoshev

Surviving the Zombie Apocalypse of Connected devices - Jfokus 2013Gustaf Nilsson Kotte

The Case for Progressive Web AppsJason Grigsby

Building Usable REST APIs. By Javier Ramirez, teowaki. FOWA Londonjavier ramirez

Writing Usable REST APIs. Javier RamirezFuture Insights

Usable REST APIs. Jrubyconf Edition. Javier Ramirez @ teowakijavier ramirez

BayJax: Expanding Yahoo! Axis across 3 screensCaridy Patino

Similar to Building Hybrid Apps with Ember (20)

Alex jubien-think mobile

Leading Enterprise Innovation at Startup Speed

Benvenuti nella “API Economy”

從 Google i/o 2015 看下半年 mobile 應用發展趨勢

Hybrid application development

From mobile browser to mobile app

Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…

Deep linking at App Promotion Summit

Harness the power of wordpress

Beyond being responsive, a mobile first strategy

How App Indexation Works

Responsive Design

Responsivedesign slides2-120507173812-phpapp01

Mobile web apps here and now!

Surviving the Zombie Apocalypse of Connected devices - Jfokus 2013

The Case for Progressive Web Apps

Building Usable REST APIs. By Javier Ramirez, teowaki. FOWA London

Writing Usable REST APIs. Javier Ramirez

Usable REST APIs. Jrubyconf Edition. Javier Ramirez @ teowaki

BayJax: Expanding Yahoo! Axis across 3 screens

Recently uploaded

AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...Alluxio, Inc.

Globus Compute wth IRI Workflows - GlobusWorld 2024Globus

Agnieszka Andrzejewska - BIM School Course in Krakówbim.edu.pl

OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoamtakuyayamamoto1800

Corporate Management | Session 3 of 3 | Tendenci AMSTendenci - The Open Source AMS (Association Management Software)

TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERRORTier1 app

AI/ML Infra Meetup | Perspective on Deep Learning FrameworkAlluxio, Inc.

Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...Shahin Sheidaei

SOCRadar Research Team: Latest Activities of IntelBrokerSOCRadar

Cyaniclab : Software Development Agency Portfolio.pdfCyanic lab

A Comprehensive Appium Guide for Hybrid App Automation Testing.pdfkalichargn70th171

A Comprehensive Look at Generative AI in Retail App Testing.pdfkalichargn70th171

AI/ML Infra Meetup | ML explainability in MichelangeloAlluxio, Inc.

Enhancing Research Orchestration Capabilities at ORNL.pdfGlobus

In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...Juraj Vysvader

WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2

Advanced Flow Concepts Every Developer Should KnowPeter Caitens

Abortion ^Clinic ^%[+971588192166''] Abortion Pill Al Ain (?@?) Abortion Pill...Abortion Clinic

Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...informapgpstrackings

Studiovity film pre-production and screenwriting softwareinfo611746

Recently uploaded (20)

AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...

Globus Compute wth IRI Workflows - GlobusWorld 2024

Agnieszka Andrzejewska - BIM School Course in Kraków

OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam

Corporate Management | Session 3 of 3 | Tendenci AMS

TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR

AI/ML Infra Meetup | Perspective on Deep Learning Framework

Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...

SOCRadar Research Team: Latest Activities of IntelBroker

Cyaniclab : Software Development Agency Portfolio.pdf

A Comprehensive Appium Guide for Hybrid App Automation Testing.pdf

A Comprehensive Look at Generative AI in Retail App Testing.pdf

AI/ML Infra Meetup | ML explainability in Michelangelo

Enhancing Research Orchestration Capabilities at ORNL.pdf

In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...

WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation

Advanced Flow Concepts Every Developer Should Know

Abortion ^Clinic ^%[+971588192166''] Abortion Pill Al Ain (?@?) Abortion Pill...

Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...

Studiovity film pre-production and screenwriting software

Building Hybrid Apps with Ember

1. Building Hybrid apps with Ember

2. @jakecraige

4. Cross P l a t f o r m

5. WEB

6. Easy & Fast

7. It’s the Future http://1.bp.blogspot.com/_RHK3n3Uireo/TEUDDQK0Y4I/AAAAAAAAAR4/7g3a7t2xQ1s/s1600/destination_moon3.jpg

8. Hybrid vs. Native

9. Native Walmart Amazon Instagram

10. Native Android: RelativeLayout iOS: UINavigationBar Walmart Amazon Instagram

11. Native Android: TabHost iOS: UITabBar Walmart Amazon Instagram

12. Native Android: ListView iOS: UITableView Walmart Amazon Instagram

13. Hybrid Worth It EventAssist BeautyNow

14. Hybrid Sticky Header Worth It EventAssist BeautyNow

15. Hybrid Sticky Footer Worth It EventAssist BeautyNow

16. Hybrid html UL Worth It EventAssist BeautyNow

17. Hybrid html UL, DIV Worth It EventAssist BeautyNow

18. Hybrid html UL, DIV, SPANs? Worth It EventAssist BeautyNow

19. Hybrid html UL, DIV, SPANs? WHATEVER Worth It EventAssist BeautyNow

20. html UL, DIV, SPANs? CSS Hybrid Worth It EventAssist BeautyNow

21. Convince theBoss

22. Why? Recap • Cross Platform • Web • Easy & Fast • The Future

23. What do we need?

24. Framework

25. I’m a framework http://carefullycrafted.net/images/Ember.js_Logo_and_Mascot.png

26. I’m a framework It’s lonely out here. In Defense of Frameworks - http://youtu.be/jScLjUlLTLI http://carefullycrafted.net/images/Ember.js_Logo_and_Mascot.png

27. Native

28. Cordova Web to Native http://wpmedia.digitoffee.com//2014/02/PhoneGapLogo.png http://cordova.apache.org/images/cordova_bot.png

29. http://wpmedia.digitoffee.com//2014/02/PhoneGapLogo.png http://cordova.apache.org/images/cordova_bot.png Cordova

30. Builds

31. http://nodejs.org/images/logo.svg

32. Excellent build tooling http://nodejs.org/images/logo.svg

33. Automation

34. ember-cli http://thau.me/wp-content/uploads/2014/01/tomster-under-construction.png

35. ember-cli & ember-cli-cordova http://thau.me/wp-content/uploads/2014/01/tomster-under-construction.png

36. ember-cli & ember-cli-cordova http://thau.me/wp-content/uploads/2014/01/tomster-under-construction.png

37. Tooling Recap • Ember • Cordova • ember-cli • ember-cli-cordova

38. Let's build a Coffee App