SlideShare a Scribd company logo
1 of 33
Download to read offline
Mobile Apps usingMobile Apps using
AngularJSAngularJS
Using Cordova & ionic
by Adam Klein
Please...Please...
Ask questions all the time
2-3 years ago...2-3 years ago...
Performance was bad
Frameworks were h ard to use and buggy
No commonly used Javascript framework
for Single Page Apps
In other words: no technological readiness
TodayToday
Mobile browsers are better
Frameworks are better
We've got AngularJS & ionic
Don't believe me?Don't believe me?
About meAbout me
Adam Klein
Co-Founder of 500Tech.com
Thirsty for technology
@500TechIL
ProblemProblem
3 Different technologies
SolutionSolution
HTML5 Apps
HTML5 embedded in a webview
CordovaCordova
Normalized API for native features
Phonegap?!Phonegap?!
AlternativeAlternative
Trigger.iO
AngularJSAngularJS
Most commonly used
Great for Single Page Apps
Performance
And...And...
"AngularJS 2.0 is a framework for mobile apps."
-- AngularJS official blog
So, what's missing?!So, what's missing?!
IonicIonic
Common UI controls
Navigation Views
Tabs
Side menus
Overcome browser quirks
CSS FrameworkCSS Framework
not mobile first, mobile only
Automatically recognize "grade"
Common list optionsCommon list options
refresher
delete
swipe
reorder
<ion-refresher
pulling-text="Pull to refresh..."
on-refresh="refresh()">
</ion-refresher>
Long ListsLong Lists
NavigationNavigation
Smooth transitions
Each tab has it's own navigation history
Android back button support
ModalModal
Custom animations
Android back button support
KeyboardKeyboard
Prevent hiding elements
Callbacks on keyboard open / close
Taps & ClicksTaps & Clicks
300ms delay
Normalized behaviour
Powerful CLIPowerful CLI
To summarizeTo summarize
It looks awesome
It moves awesome
It's easy to use
It's based on AngularJS
Who's behind itWho's behind it
Drifty Co.
Ben Sperry & Max Lynch
Started at 2012
Raised $1 Million
Popularity - 9 months agoPopularity - 9 months ago
Popularity - todayPopularity - today
But still...But still...
It's new (v1.0.0-rc.1)
There will be bugs
Missing features
Change API
Not much stackoverflow
Before you run and implementBefore you run and implement
Do you need to support mobile / desktop web as
well?
Are you developing Any.DO's competitor?
Are you developing an animated Game?
Check HTML5's limitations (background tasks,
custom video control, etc.)
Check iOs guidelines
Questions?Questions?
adam@500tech.com
@500TechIL
500tech.com
hackademy.co.il
angular.co.il

More Related Content

What's hot

AngularJS on Mobile with the Ionic Framework
AngularJS on Mobile with the Ionic FrameworkAngularJS on Mobile with the Ionic Framework
AngularJS on Mobile with the Ionic Framework
Troy Miles
 

What's hot (20)

Intro Angular Ionic
Intro Angular Ionic Intro Angular Ionic
Intro Angular Ionic
 
AngularJS on Mobile with the Ionic Framework
AngularJS on Mobile with the Ionic FrameworkAngularJS on Mobile with the Ionic Framework
AngularJS on Mobile with the Ionic Framework
 
Building Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and IonicBuilding Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and Ionic
 
Ionic Framework - Intro to Hybrid Mobile Application Development
Ionic Framework - Intro to Hybrid Mobile Application DevelopmentIonic Framework - Intro to Hybrid Mobile Application Development
Ionic Framework - Intro to Hybrid Mobile Application Development
 
"Our BDDs are broken!" Lean Agile Exchange 2020
"Our BDDs are broken!"   Lean Agile Exchange 2020"Our BDDs are broken!"   Lean Agile Exchange 2020
"Our BDDs are broken!" Lean Agile Exchange 2020
 
Ionic
IonicIonic
Ionic
 
Hybrid vs. Native app - Ionic Framework with AngularJS
Hybrid vs. Native app - Ionic Framework with AngularJSHybrid vs. Native app - Ionic Framework with AngularJS
Hybrid vs. Native app - Ionic Framework with AngularJS
 
Intro to mobile apps with the ionic framework & angular js
Intro to mobile apps with the ionic framework & angular jsIntro to mobile apps with the ionic framework & angular js
Intro to mobile apps with the ionic framework & angular js
 
Building mobile app with Ionic Framework
Building mobile app with Ionic FrameworkBuilding mobile app with Ionic Framework
Building mobile app with Ionic Framework
 
Cordova, Angularjs & Ionic @ Codeaholics
Cordova, Angularjs & Ionic @ CodeaholicsCordova, Angularjs & Ionic @ Codeaholics
Cordova, Angularjs & Ionic @ Codeaholics
 
Hybrid Mobile Development with Apache Cordova,AngularJs and ionic
Hybrid Mobile Development with Apache Cordova,AngularJs and ionicHybrid Mobile Development with Apache Cordova,AngularJs and ionic
Hybrid Mobile Development with Apache Cordova,AngularJs and ionic
 
Workshop on Hybrid App Development with Ionic Framework
Workshop on Hybrid App Development with Ionic FrameworkWorkshop on Hybrid App Development with Ionic Framework
Workshop on Hybrid App Development with Ionic Framework
 
Checklist for Iphone App Design
Checklist for Iphone App Design Checklist for Iphone App Design
Checklist for Iphone App Design
 
Hybrid vs native mobile development – how to choose a tech stack
Hybrid vs native mobile development – how to choose a tech stackHybrid vs native mobile development – how to choose a tech stack
Hybrid vs native mobile development – how to choose a tech stack
 
Popluar AngularJS Frameworks
Popluar AngularJS FrameworksPopluar AngularJS Frameworks
Popluar AngularJS Frameworks
 
Debugging and Tuning Mobile Web Sites with Modern Web Browsers
Debugging and Tuning Mobile Web Sites with Modern Web BrowsersDebugging and Tuning Mobile Web Sites with Modern Web Browsers
Debugging and Tuning Mobile Web Sites with Modern Web Browsers
 
Business Values of PWAs
Business Values of PWAsBusiness Values of PWAs
Business Values of PWAs
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
 
HTML5 and jQuery Mobile
HTML5 and jQuery MobileHTML5 and jQuery Mobile
HTML5 and jQuery Mobile
 
Mobile web apps here and now!
Mobile web apps here and now!Mobile web apps here and now!
Mobile web apps here and now!
 

Similar to Mobile Apps using AngularJS

Angular.js Talk at the November Meetup of the BerlinJS User Group
Angular.js Talk at the November Meetup of the BerlinJS User GroupAngular.js Talk at the November Meetup of the BerlinJS User Group
Angular.js Talk at the November Meetup of the BerlinJS User Group
Manuel Kießling
 
Cross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic FrameworkCross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic Framework
Troy Miles
 
The mobile landscape london tfm&a 2013
The mobile landscape london tfm&a 2013The mobile landscape london tfm&a 2013
The mobile landscape london tfm&a 2013
Mathias Strandberg
 

Similar to Mobile Apps using AngularJS (20)

Angular.js Talk at the November Meetup of the BerlinJS User Group
Angular.js Talk at the November Meetup of the BerlinJS User GroupAngular.js Talk at the November Meetup of the BerlinJS User Group
Angular.js Talk at the November Meetup of the BerlinJS User Group
 
Cross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic FrameworkCross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic Framework
 
Detailed Guide of Angular Development 2022.pptx
Detailed Guide of Angular Development 2022.pptxDetailed Guide of Angular Development 2022.pptx
Detailed Guide of Angular Development 2022.pptx
 
Hybrid application development
Hybrid application developmentHybrid application development
Hybrid application development
 
The Mobile Landscape - Do you really need an app?
The Mobile Landscape - Do you really need an app?The Mobile Landscape - Do you really need an app?
The Mobile Landscape - Do you really need an app?
 
The mobile landscape london tfm&a 2013
The mobile landscape london tfm&a 2013The mobile landscape london tfm&a 2013
The mobile landscape london tfm&a 2013
 
Difference Between jQuery and Angular
Difference Between jQuery and AngularDifference Between jQuery and Angular
Difference Between jQuery and Angular
 
Where and Why Use Angular for Web Development?
Where and Why Use Angular for Web Development?Where and Why Use Angular for Web Development?
Where and Why Use Angular for Web Development?
 
Satisfying Business and Engineering Requirements: Client-server JavaScript, S...
Satisfying Business and Engineering Requirements: Client-server JavaScript, S...Satisfying Business and Engineering Requirements: Client-server JavaScript, S...
Satisfying Business and Engineering Requirements: Client-server JavaScript, S...
 
Big Improvement_ New AngularJS Tools Changing How We Develop.pptx
Big Improvement_ New AngularJS Tools Changing How We Develop.pptxBig Improvement_ New AngularJS Tools Changing How We Develop.pptx
Big Improvement_ New AngularJS Tools Changing How We Develop.pptx
 
quantum_leap_angularjs_tools_redefining_development_in_2023.pdf
quantum_leap_angularjs_tools_redefining_development_in_2023.pdfquantum_leap_angularjs_tools_redefining_development_in_2023.pdf
quantum_leap_angularjs_tools_redefining_development_in_2023.pdf
 
Cross platform engineering - Lessons Learned (Michael Asimakopoulos, Valadis ...
Cross platform engineering - Lessons Learned (Michael Asimakopoulos, Valadis ...Cross platform engineering - Lessons Learned (Michael Asimakopoulos, Valadis ...
Cross platform engineering - Lessons Learned (Michael Asimakopoulos, Valadis ...
 
Is Ionic good for Mobile app development?
Is Ionic good for Mobile app development?Is Ionic good for Mobile app development?
Is Ionic good for Mobile app development?
 
AngularJS : Superheroic Javascript MVW Framework
AngularJS : Superheroic Javascript MVW FrameworkAngularJS : Superheroic Javascript MVW Framework
AngularJS : Superheroic Javascript MVW Framework
 
Why do developers prefer ionic to build progressive web apps
Why do developers prefer ionic to build progressive web apps  Why do developers prefer ionic to build progressive web apps
Why do developers prefer ionic to build progressive web apps
 
Doran-C4L2010
Doran-C4L2010Doran-C4L2010
Doran-C4L2010
 
Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic FrameworkHybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic Framework
 
Ionic
IonicIonic
Ionic
 
Big Improvement_ New AngularJS Tools Changing How We Develop.pdf
Big Improvement_ New AngularJS Tools Changing How We Develop.pdfBig Improvement_ New AngularJS Tools Changing How We Develop.pdf
Big Improvement_ New AngularJS Tools Changing How We Develop.pdf
 
Hybrid app development with ionic
Hybrid app development with ionicHybrid app development with ionic
Hybrid app development with ionic
 

More from Adam Klein

More from Adam Klein (10)

Angular Course - Flux & Redux
Angular Course - Flux & ReduxAngular Course - Flux & Redux
Angular Course - Flux & Redux
 
Redux "Bad" Practices - A List of 13 Bad Practices and How to Avoid Them
Redux "Bad" Practices - A List of 13 Bad Practices and How to Avoid ThemRedux "Bad" Practices - A List of 13 Bad Practices and How to Avoid Them
Redux "Bad" Practices - A List of 13 Bad Practices and How to Avoid Them
 
Tales of an open source library
Tales of an open source libraryTales of an open source library
Tales of an open source library
 
Es6 everywhere
Es6 everywhereEs6 everywhere
Es6 everywhere
 
Clean up your code
Clean up your codeClean up your code
Clean up your code
 
Ruby for devops
Ruby for devopsRuby for devops
Ruby for devops
 
Lean startups for non-tech entrepreneurs
Lean startups for non-tech entrepreneursLean startups for non-tech entrepreneurs
Lean startups for non-tech entrepreneurs
 
Data models in Angular 1 & 2
Data models in Angular 1 & 2Data models in Angular 1 & 2
Data models in Angular 1 & 2
 
Client side unit tests - using jasmine & karma
Client side unit tests - using jasmine & karmaClient side unit tests - using jasmine & karma
Client side unit tests - using jasmine & karma
 
3rd party
3rd party3rd party
3rd party
 

Recently uploaded

Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
FIDO Alliance
 

Recently uploaded (20)

Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform
Less Is More: Utilizing Ballerina to Architect a Cloud Data PlatformLess Is More: Utilizing Ballerina to Architect a Cloud Data Platform
Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptx
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
Quantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation ComputingQuantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation Computing
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Choreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software EngineeringChoreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software Engineering
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps Productivity
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
API Governance and Monetization - The evolution of API governance
API Governance and Monetization -  The evolution of API governanceAPI Governance and Monetization -  The evolution of API governance
API Governance and Monetization - The evolution of API governance
 

Mobile Apps using AngularJS