Mobile JS Frameworks
-
Upload
ibrahim-ersoy -
Category
Technology
-
view
109 -
download
1
description
Transcript of Mobile JS Frameworks
![Page 1: Mobile JS Frameworks](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c845204a795985748b4635/html5/thumbnails/1.jpg)
Mobile JS Frameworks
IBRAHIM ERSOYMOBİLE DEVELOPER @ SIMTERNET
![Page 2: Mobile JS Frameworks](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c845204a795985748b4635/html5/thumbnails/2.jpg)
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
![Page 3: Mobile JS Frameworks](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c845204a795985748b4635/html5/thumbnails/3.jpg)
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 »
![Page 4: Mobile JS Frameworks](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c845204a795985748b4635/html5/thumbnails/4.jpg)
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
![Page 5: Mobile JS Frameworks](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c845204a795985748b4635/html5/thumbnails/5.jpg)
Responsive Design
![Page 6: Mobile JS Frameworks](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c845204a795985748b4635/html5/thumbnails/6.jpg)
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
![Page 7: Mobile JS Frameworks](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c845204a795985748b4635/html5/thumbnails/7.jpg)
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
![Page 8: Mobile JS Frameworks](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c845204a795985748b4635/html5/thumbnails/8.jpg)
Platforms & Marketplaces
• iOS – iTunes Store
• Android – Google Play
• Blackberry – AppWorld
• Windows Phone & Windows 8 – Windows Store
• Tizen – Tizen Store
![Page 9: Mobile JS Frameworks](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c845204a795985748b4635/html5/thumbnails/9.jpg)
App Builders
Easy to use, No Coding skill required
AppyPie.com
appery.io
TheAppBuilder
MobinCube
ShoutEm
![Page 10: Mobile JS Frameworks](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c845204a795985748b4635/html5/thumbnails/10.jpg)
PhoneGap
build.phonegap.com or Standalone
Apache Cordova
Packaging in the Cloud
Github Support
![Page 11: Mobile JS Frameworks](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c845204a795985748b4635/html5/thumbnails/11.jpg)
JS FRAMEWORKS
![Page 12: Mobile JS Frameworks](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c845204a795985748b4635/html5/thumbnails/12.jpg)
jQuery Mobile and iUI’s Cons
jQuery Mobile• Page Transitions
• Large JS Files
• Canvas Animations
iUI• Documentation
• No Native Support
![Page 13: Mobile JS Frameworks](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c845204a795985748b4635/html5/thumbnails/13.jpg)
jQuery Mobile and iUI’s Pros
jQuery Mobile• Familiarity with jQuery
• Design & Layout
iUI• iOS UI
![Page 14: Mobile JS Frameworks](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c845204a795985748b4635/html5/thumbnails/14.jpg)
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
![Page 15: Mobile JS Frameworks](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c845204a795985748b4635/html5/thumbnails/15.jpg)
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
![Page 16: Mobile JS Frameworks](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c845204a795985748b4635/html5/thumbnails/16.jpg)
ThemeRoller for jQuery Mobile
• Customizable user interface• Built-in theming framework • ThemeRoller application
http://themeroller.jquerymobile.com/
![Page 17: Mobile JS Frameworks](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c845204a795985748b4635/html5/thumbnails/17.jpg)
Supported Platforms
3-level graded platform support system, supported platforms include:
• Apple iOS (iPhone, iPod Touch, iPad)
• Android
• Windows Phone
• Blackberry
![Page 18: Mobile JS Frameworks](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c845204a795985748b4635/html5/thumbnails/18.jpg)
iUI – iOS User Interface
http://www.iui-js.org/
![Page 19: Mobile JS Frameworks](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c845204a795985748b4635/html5/thumbnails/19.jpg)
“”
jQuery Mobile ThemeRoller Demo
![Page 20: Mobile JS Frameworks](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c845204a795985748b4635/html5/thumbnails/20.jpg)
Smartface
![Page 21: Mobile JS Frameworks](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c845204a795985748b4635/html5/thumbnails/21.jpg)
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
![Page 22: Mobile JS Frameworks](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c845204a795985748b4635/html5/thumbnails/22.jpg)
Smartface Cons
No game, no utilities
Some apps need more knowledge
Mac and Linux support
Dependency
![Page 23: Mobile JS Frameworks](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c845204a795985748b4635/html5/thumbnails/23.jpg)
Questions?
![Page 24: Mobile JS Frameworks](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c845204a795985748b4635/html5/thumbnails/24.jpg)
“”
Thanks for coming!