SlideShare uma empresa Scribd logo
1 de 24
Mobile JS Frameworks
IBRAHIM ERSOY
MOBILE DEVELOPER @ SIMTERNET
Agenda

Introduction
• Mobile Apps
• Native vs Hybrid
vs Mobile Web
• Platforms/Stores
• App Builders
• PhoneGap

JS Frameworks
• Jquery Mobile
• iUI

JS Demo
• jQuery Mobile
ThemeRoller

Smartface
• Smartface Pros
• Smartface Cons
What is a ‘Mobile App’ ?
Mobile apps are software programs you can download and access
directly using your phone or tablet

«

Mobile App -> Software that runs on your mobile device

»
Native vs Hybrid vs Mobile Web


Native : Platform-based Programming Language,UI & libraries



Hybrid : Native-based HTML/JS mobile web apps.



Mobile Web : Websites that run responsive on mobile devices
Responsive Design
What is ‘Hybrid’ ?


What are mobile web applications?
•

Increasingly popular way to deliver content and
business applications to mobile devices

•

Alternative to developing native mobile apps

•

Run on any OS, desktop, tablet, smartphone

•

Easy to develop using standard web technologies and frameworks

•

Advances in HTML, CSS and JavaScript allow for shifting more functionality to the
browser, providing richer user experience and better performance

•

Easy to maintain and easy roll out of upgrades
Limitations of Hybrid


Browsers do not typically have access to advanced functions of a device,
like GPS, camera, address book...



Web apps are often slower than native apps



Mobile web apps require permanent Internet connection



Using offline web application caching and platforms like PhoneGap,
Titanium, etc. provides ways to address these limitations
Platforms & Marketplaces
•

iOS – iTunes Store

•

Android – Google Play

•

Blackberry – AppWorld

•

Windows Phone & Windows 8 – Windows Store

•

Tizen – Tizen Store
App Builders


Easy to use, No Coding skill required



AppyPie.com



appery.io



TheAppBuilder



MobinCube



ShoutEm
PhoneGap


build.phonegap.com or Standalone



Apache Cordova



Packaging in the Cloud



Github Support
JS FRAMEWORKS
jQuery Mobile and iUI’s Cons
jQuery Mobile

iUI

•

Page Transitions

•

Documentation

•

Large JS Files

•

No Native Support

•

Canvas Animations
jQuery Mobile and iUI’s Pros
jQuery Mobile
•

Familiarity with jQuery

•

Design & Layout

iUI
•

iOS UI
jQuery Mobile
• Touch-optimized JavaScript framework for smartphones & tablets
• Built on jQuery and jQuery UI foundation
• Unified user interface system across all popular mobile platforms
• Responsive design techniques allow the same underlying codebase to
automatically scale from smartphone to tablet and desktop-sized screens
• AJAX-based navigation system to enable animated page transitions
while maintaining back button
Differences between jQuery and
jQuery Mobile
• jQuery: Library that makes it easier to write JavaScript through selectors
• jQuery Mobile:

Framework built on top of jQuery
Used by developers to build mobile interfaces
Coding is done using plain HTML markup for the most part
jQuery Mobile automatically applies styles and add functionality to widgets
ThemeRoller for jQuery Mobile
• Customizable user interface
• Built-in theming framework
• ThemeRoller application

http://themeroller.jquerymobile.com/
Supported Platforms
3-level graded platform support system, supported platforms include:
• Apple iOS (iPhone, iPod Touch, iPad)
• Android
• Windows Phone
• Blackberry
iUI – iOS User Interface
http://www.iui-js.org/
“

jQuery Mobile
ThemeRoller Demo

”
Smartface
Smartface Pros













WYSIWYG design editor
JavaScript code editor
On Device Emulator
Memory Management
Network Components Wizards
Ready to Use Libraries (Animation,
Security…)
Single Code Based Testing
On Device Debugging
Solving Device Specific Problems
New OS Updates doesnt cause
Fragmentation Problems
Plug-In
JavaScript Power



Customized JS Engine inside



Certified by Symantec



NATIVE and Cross-Platform
Smartface Cons


No game, no utilities



Some apps need more
knowledge



Mac and Linux support



Dependency
Questions?
“

Thanks for coming!

”

Mais conteúdo relacionado

Mais procurados

Web Apps vs. Native Apps: The Low Down
Web Apps vs. Native Apps: The Low DownWeb Apps vs. Native Apps: The Low Down
Web Apps vs. Native Apps: The Low Down
Apppli
 

Mais procurados (19)

Hybrid Mobile App
Hybrid Mobile AppHybrid Mobile App
Hybrid Mobile App
 
Hybrid vs Native
Hybrid vs NativeHybrid vs Native
Hybrid vs Native
 
Hybrid mobile app development
Hybrid mobile app developmentHybrid mobile app development
Hybrid mobile app development
 
Xamarin.Forms
Xamarin.FormsXamarin.Forms
Xamarin.Forms
 
Consider Starting Small
Consider Starting SmallConsider Starting Small
Consider Starting Small
 
Building Hybrid Apps with AngularJS and Ionic
Building Hybrid Apps with AngularJS and IonicBuilding Hybrid Apps with AngularJS and Ionic
Building Hybrid Apps with AngularJS and Ionic
 
Hybrid mobile apps
Hybrid mobile appsHybrid mobile apps
Hybrid mobile apps
 
7Langit present Marketing and Monetizing on BlackBerry Platform
7Langit present Marketing and Monetizing on BlackBerry Platform7Langit present Marketing and Monetizing on BlackBerry Platform
7Langit present Marketing and Monetizing on BlackBerry Platform
 
Native vs. Hybrid Apps
Native vs. Hybrid AppsNative vs. Hybrid Apps
Native vs. Hybrid Apps
 
Web Apps vs. Native Apps: The Low Down
Web Apps vs. Native Apps: The Low DownWeb Apps vs. Native Apps: The Low Down
Web Apps vs. Native Apps: The Low Down
 
Mobile Application Framework - OFM Canberra September 2014
Mobile Application Framework - OFM Canberra September 2014Mobile Application Framework - OFM Canberra September 2014
Mobile Application Framework - OFM Canberra September 2014
 
Synapse india reviews on cross plateform mobile apps development
Synapse india reviews on cross plateform mobile apps developmentSynapse india reviews on cross plateform mobile apps development
Synapse india reviews on cross plateform mobile apps development
 
AppNotch
AppNotchAppNotch
AppNotch
 
7Langit present Mobile Ad on BlackBerry
7Langit present Mobile Ad on BlackBerry7Langit present Mobile Ad on BlackBerry
7Langit present Mobile Ad on BlackBerry
 
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App Development
 
Native Device vs. Mobile Web Applications
Native Device vs. Mobile Web ApplicationsNative Device vs. Mobile Web Applications
Native Device vs. Mobile Web Applications
 
Web App VS. Hybrid App VS. Native App?
Web App VS. Hybrid App VS. Native App?Web App VS. Hybrid App VS. Native App?
Web App VS. Hybrid App VS. Native App?
 
The Great Mobile Debate: Native vs. Hybrid App Development
The Great Mobile Debate: Native vs. Hybrid App DevelopmentThe Great Mobile Debate: Native vs. Hybrid App Development
The Great Mobile Debate: Native vs. Hybrid App Development
 
Native vs Web vs Hybrid Mobile Application Development
Native vs Web vs Hybrid Mobile Application DevelopmentNative vs Web vs Hybrid Mobile Application Development
Native vs Web vs Hybrid Mobile Application Development
 

Semelhante a Mobile JS Frameworks

Hybrid mobile application with Ionic
Hybrid mobile application with IonicHybrid mobile application with Ionic
Hybrid mobile application with Ionic
Maulik Bamania
 
J query mobile tech talk
J query mobile tech talkJ query mobile tech talk
J query mobile tech talk
woliverj
 
Designing for Mobile Devices
Designing for Mobile DevicesDesigning for Mobile Devices
Designing for Mobile Devices
OxonDigital
 
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapBuilding Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Nick Landry
 

Semelhante a Mobile JS Frameworks (20)

Hybrid mobile application with Ionic
Hybrid mobile application with IonicHybrid mobile application with Ionic
Hybrid mobile application with Ionic
 
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
 
J query mobile tech talk
J query mobile tech talkJ query mobile tech talk
J query mobile tech talk
 
Mobile applications chapter 5
Mobile applications chapter 5Mobile applications chapter 5
Mobile applications chapter 5
 
Jquery mobile
Jquery mobileJquery mobile
Jquery mobile
 
Xamarin COE by Mukteswar Patnaik
Xamarin COE by Mukteswar PatnaikXamarin COE by Mukteswar Patnaik
Xamarin COE by Mukteswar Patnaik
 
Synapse india reviews on mobile application development
Synapse india reviews on mobile application developmentSynapse india reviews on mobile application development
Synapse india reviews on mobile application development
 
Designing for Mobile Devices
Designing for Mobile DevicesDesigning for Mobile Devices
Designing for Mobile Devices
 
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapBuilding Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
 
Mobile web development
Mobile web development Mobile web development
Mobile web development
 
Popular App Development Frameworks used by App Developers.
Popular App Development Frameworks used by App Developers.Popular App Development Frameworks used by App Developers.
Popular App Development Frameworks used by App Developers.
 
Top Technologies to Develop Mobile Apps.pptx
Top Technologies to Develop Mobile Apps.pptxTop Technologies to Develop Mobile Apps.pptx
Top Technologies to Develop Mobile Apps.pptx
 
top-10-best-mobile-app-development-frameworks-in-2021.pdf
top-10-best-mobile-app-development-frameworks-in-2021.pdftop-10-best-mobile-app-development-frameworks-in-2021.pdf
top-10-best-mobile-app-development-frameworks-in-2021.pdf
 
Cross platform mobile application devlopment
Cross platform mobile application devlopmentCross platform mobile application devlopment
Cross platform mobile application devlopment
 
Getting Started with Mobile Websites if You Don't Know Code
Getting Started with Mobile Websites if You Don't Know CodeGetting Started with Mobile Websites if You Don't Know Code
Getting Started with Mobile Websites if You Don't Know Code
 
Introduction to Phonegap
Introduction to PhonegapIntroduction to Phonegap
Introduction to Phonegap
 
Mobile app development
Mobile app development  Mobile app development
Mobile app development
 
chapter2
chapter2chapter2
chapter2
 
Developing a native mobile apps using Ionic&Cordova
Developing a native mobile apps using Ionic&CordovaDeveloping a native mobile apps using Ionic&Cordova
Developing a native mobile apps using Ionic&Cordova
 
Hybrid Mobile application
Hybrid Mobile applicationHybrid Mobile application
Hybrid Mobile application
 

Mais de Ibrahim Ersoy

SharePoint 2010 ve 2013 te Search
SharePoint 2010 ve 2013 te SearchSharePoint 2010 ve 2013 te Search
SharePoint 2010 ve 2013 te Search
Ibrahim Ersoy
 
SQL Server 2012’de View ve CTE
SQL Server 2012’de View ve CTESQL Server 2012’de View ve CTE
SQL Server 2012’de View ve CTE
Ibrahim Ersoy
 
Windows Store Uygulama Geliştirmeye Giriş
Windows Store Uygulama Geliştirmeye GirişWindows Store Uygulama Geliştirmeye Giriş
Windows Store Uygulama Geliştirmeye Giriş
Ibrahim Ersoy
 
Sharepoint 2013 te Yazılım Geliştirme Teknikleri
Sharepoint 2013 te Yazılım Geliştirme TeknikleriSharepoint 2013 te Yazılım Geliştirme Teknikleri
Sharepoint 2013 te Yazılım Geliştirme Teknikleri
Ibrahim Ersoy
 

Mais de Ibrahim Ersoy (11)

Tartışıyoruz #1: Server Side vs Client Side
Tartışıyoruz #1: Server Side vs Client SideTartışıyoruz #1: Server Side vs Client Side
Tartışıyoruz #1: Server Side vs Client Side
 
Windows 8 Uygulama Geliştirme
Windows 8 Uygulama GeliştirmeWindows 8 Uygulama Geliştirme
Windows 8 Uygulama Geliştirme
 
Dependency Injection ve Bağlı Metodlar
Dependency Injection ve Bağlı MetodlarDependency Injection ve Bağlı Metodlar
Dependency Injection ve Bağlı Metodlar
 
SharePoint 2010 ve 2013 te Search
SharePoint 2010 ve 2013 te SearchSharePoint 2010 ve 2013 te Search
SharePoint 2010 ve 2013 te Search
 
SQL Server 2012’de View ve CTE
SQL Server 2012’de View ve CTESQL Server 2012’de View ve CTE
SQL Server 2012’de View ve CTE
 
WCF'e Giriş
WCF'e GirişWCF'e Giriş
WCF'e Giriş
 
Windows Store Uygulama Geliştirmeye Giriş
Windows Store Uygulama Geliştirmeye GirişWindows Store Uygulama Geliştirmeye Giriş
Windows Store Uygulama Geliştirmeye Giriş
 
Sharepoint 2013 te Yazılım Geliştirme Teknikleri
Sharepoint 2013 te Yazılım Geliştirme TeknikleriSharepoint 2013 te Yazılım Geliştirme Teknikleri
Sharepoint 2013 te Yazılım Geliştirme Teknikleri
 
Windows 8 ile Uygulama Geliştirme
Windows 8 ile Uygulama GeliştirmeWindows 8 ile Uygulama Geliştirme
Windows 8 ile Uygulama Geliştirme
 
Konsept Olusturma
Konsept OlusturmaKonsept Olusturma
Konsept Olusturma
 
Oyun Tasarımı Sunumu
Oyun Tasarımı SunumuOyun Tasarımı Sunumu
Oyun Tasarımı Sunumu
 

Último

Último (20)

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 

Mobile JS Frameworks

  • 1. Mobile JS Frameworks IBRAHIM ERSOY MOBILE DEVELOPER @ SIMTERNET
  • 2. Agenda Introduction • Mobile Apps • Native vs Hybrid vs Mobile Web • Platforms/Stores • App Builders • PhoneGap JS Frameworks • Jquery Mobile • iUI JS Demo • jQuery Mobile ThemeRoller Smartface • Smartface Pros • Smartface Cons
  • 3. What is a ‘Mobile App’ ? Mobile apps are software programs you can download and access directly using your phone or tablet « Mobile App -> Software that runs on your mobile device »
  • 4. Native vs Hybrid vs Mobile Web  Native : Platform-based Programming Language,UI & libraries  Hybrid : Native-based HTML/JS mobile web apps.  Mobile Web : Websites that run responsive on mobile devices
  • 6. What is ‘Hybrid’ ?  What are mobile web applications? • Increasingly popular way to deliver content and business applications to mobile devices • Alternative to developing native mobile apps • Run on any OS, desktop, tablet, smartphone • Easy to develop using standard web technologies and frameworks • Advances in HTML, CSS and JavaScript allow for shifting more functionality to the browser, providing richer user experience and better performance • Easy to maintain and easy roll out of upgrades
  • 7. Limitations of Hybrid  Browsers do not typically have access to advanced functions of a device, like GPS, camera, address book...  Web apps are often slower than native apps  Mobile web apps require permanent Internet connection  Using offline web application caching and platforms like PhoneGap, Titanium, etc. provides ways to address these limitations
  • 8. Platforms & Marketplaces • iOS – iTunes Store • Android – Google Play • Blackberry – AppWorld • Windows Phone & Windows 8 – Windows Store • Tizen – Tizen Store
  • 9. App Builders  Easy to use, No Coding skill required  AppyPie.com  appery.io  TheAppBuilder  MobinCube  ShoutEm
  • 10. PhoneGap  build.phonegap.com or Standalone  Apache Cordova  Packaging in the Cloud  Github Support
  • 12. jQuery Mobile and iUI’s Cons jQuery Mobile iUI • Page Transitions • Documentation • Large JS Files • No Native Support • Canvas Animations
  • 13. jQuery Mobile and iUI’s Pros jQuery Mobile • Familiarity with jQuery • Design & Layout iUI • iOS UI
  • 14. jQuery Mobile • Touch-optimized JavaScript framework for smartphones & tablets • Built on jQuery and jQuery UI foundation • Unified user interface system across all popular mobile platforms • Responsive design techniques allow the same underlying codebase to automatically scale from smartphone to tablet and desktop-sized screens • AJAX-based navigation system to enable animated page transitions while maintaining back button
  • 15. Differences between jQuery and jQuery Mobile • jQuery: Library that makes it easier to write JavaScript through selectors • jQuery Mobile: Framework built on top of jQuery Used by developers to build mobile interfaces Coding is done using plain HTML markup for the most part jQuery Mobile automatically applies styles and add functionality to widgets
  • 16. ThemeRoller for jQuery Mobile • Customizable user interface • Built-in theming framework • ThemeRoller application http://themeroller.jquerymobile.com/
  • 17. Supported Platforms 3-level graded platform support system, supported platforms include: • Apple iOS (iPhone, iPod Touch, iPad) • Android • Windows Phone • Blackberry
  • 18. iUI – iOS User Interface http://www.iui-js.org/
  • 21. Smartface Pros             WYSIWYG design editor JavaScript code editor On Device Emulator Memory Management Network Components Wizards Ready to Use Libraries (Animation, Security…) Single Code Based Testing On Device Debugging Solving Device Specific Problems New OS Updates doesnt cause Fragmentation Problems Plug-In JavaScript Power  Customized JS Engine inside  Certified by Symantec  NATIVE and Cross-Platform
  • 22. Smartface Cons  No game, no utilities  Some apps need more knowledge  Mac and Linux support  Dependency