Mobile web development
•Download as PPTX, PDF•
1 like•369 views
Short introduction and current trends on mobile web development
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (18)
Similar to Mobile web development
Similar to Mobile web development (20)
More from Moumie Soulemane
More from Moumie Soulemane (10)
Recently uploaded
Recently uploaded (20)
Mobile web development
- 2. About me Soulemane Moumie Programmer Blogger Open source advocate www.moumie.org Seite 1
- 3. Introduction • What is Web Development ? • What is Mobile Web Development ? • Was predicted to be dead by now (# apps) • Trends Mobile browser traffic is 2X bigger than app traffic, and growing faster1 2
- 4. Not Convinced ! • Mobile is taking over the internet. • Mobile web browsing accounts for almost 1/3 of web traffic worldwide, and it is growing fast while desktop is declining. 3
- 6. Mobile Strategy • Does the mobile app requires the use of any special device features (i.e., camera, GPS, etc.)? • What’s my budget? • Does the mobile app needs to be Internet-enabled? • Do I need to target all mobile devices or just certain devices? • What programming languages do I already know? • How important is speed and performance? • How will this app be monetized effectively? • What is my target audience ? 5 2. http://sixrevisions.com, Published on July 11,2012, JT Mudge
- 7. 1.Native Approach - mobile application program that has been developed for use on a particular platform or device. - Executable binary files located on the device. - Access to all vendor ‘s API available on the device 6 * IBM, Native, web or hybrid mobile app development, 2012. IBM Software Thought Leadership White Paper
- 8. Pros • Since native apps work with the device’s built-in features, they are easier to work with and also perform faster on the device. • Native apps get full support from the concerned app stores and marketplaces, making the more complete and secure. • Easy access to high level services important to personal mobile experience. • Easy low-level hardware access services. • Full use of all functionalities that modern mobile devices have to offer. 7 1. Native Approach
- 9. Cons • High cost of maintenance and updation • The process of getting the app approved at the app stores can prove to be long and tedious for the developer • Users of different mobile devices may be using different versions of the app, which makes it difficult for the developer to maintain and offer support • Designers are required to be familiar with different UI components of each OS. • Limited space to install all apps we need 8 1. Native Approach
- 10. 2. Web Approach Mobile Website Mobile Web Apps 9
- 11. Mobile Web App vs. Mobile Website 10 * IBM, Native, web or hybrid mobile app development, 2012. IBM Software Thought Leadership White Paper
- 12. Offline Web Application Architecture 11 * Developing offline web application using html5,Nilachala Panigrahy, Tata consultancy services, White Paper
- 13. Pros • Immediacy – Mobile Websites Are Instantly Available. • Compatibility – Mobile Websites are Compatible Across Devices. • Upgradability – Mobile Websites Can Be Updated Instantly. • Findability – Mobile Websites Can be Found Easily. • Shareability – Mobile Websites Can be Shared Easily by Publishers, and Between Users offer. • Reach – Mobile Websites Have Broader Reach. • Lifecycle – Mobile Websites Can’t be Deleted. • Flexibility – A Mobile Website Can be an App!. • Time and Cost - Mobile Websites are Easier and Less Expensive. • Support and Sustainability. 12 2. Web Approach
- 14. Cons • Harder to optimize for all devices and screen sizes. Even if they are often tailored for small screen size, "One size fits all" is never the best solution. • Limited access to device specific features, e.g. apple built-in feature. • Limited access to low-level hardware services. • Needs to show the content that website visitors want to see. • Limited navigation since there’s no enough screen space. • Dependent on internet access except for apps written in HTML5 (offline capabilities) 13 2. Web Approach
- 21. Design (fixed position is hell) 20 http://bradfrost.com/blog/post/mobile-web-problems/
- 24. Long Load Time • Heavy image files • Too many images • Too many imports • Not being responsive • Not using HTML5 and CSS3 23
- 25. 3. Hybrid Approach • Combines native development with web technologies. • Write once and run everywhere. • Hybrid applications are web applications (or web pages) in the native browser, such as UIWebView in iOS and WebView in Android (not Safari or Chrome). Hybrid apps are developed using HTML, CSS and JavaScript, and then wrapped in a native application using platforms like Cordova. • Local - You can package HTML and JavaScript code inside the mobile application binary, in a manner similar to the structure of a native application. In this scenario you use REST APIs to move data back and forth between the device and the cloud. • Server - Alternatively you can implement the full web application from the server (with optional caching for better performance), simply using the container as a thin shell over the UIWebview. 24
- 26. Summary 25 * IBM, Native, web or hybrid mobile app development, 2012. IBM Software Thought Leadership White Paper
- 27. Basic Mobile Web Development Requirements 26
- 28. 27
- 29. CSS Frameworks • reset style sheet • grid especially for responsive web design • web typography • set of icons in sprites or icon fonts • styling for tooltips, buttons, elements of forms • parts of graphical user interfaces like accordion, tabs, slideshow or modal windows (Lightbox) • equalizer to create equal height content • often used css helper classes (left, hide) 28 Pre-prepared software frameworks that are meant to allow for easier, more standards-compliant web design using the Cascading Style Sheets language. https://en.wikipedia.org/wiki/CSS_frameworks
- 30. Gumby 29 CSS Framework It is one of the simplest frameworks with super flexibility. Any newbie can use this framework to design the website and create grids. It has useful features and is compatible with almost all browsers.
- 31. Bootstrap 30 CSS Framework It is one of the most popular frameworks because of the ease of use. It is an open source and has an extensive list of features.
- 32. Kube 31 CSS Framework It is a quick and simple way to create a website with options for colorful labels, various tables, button option and lots of other helpers. It doesn’t limit the pixels and thus is flexible for all mobiles and tablets.
- 33. Other Css Frameworks • Foundation • Concise • Pure CSS • Malo • Responsee • etc … 32
- 34. Javascript Frameworks • Jquery mobile • AngularJs • Node Js • Ember.js • Mobilize.js • Backbone.js • Etc… 33
- 35. • A JavaScript runtime built on Chrome's V8 JavaScript engine. • Uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. • Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world. • used to develop I/O intensive web applications like video streaming sites, single-page applications, and other web applications. 34
- 36. UI SDKs • The UI allow the development of applications that replicate the features of native UI • JQTouch • Sencha Touch (Ext JS+ jQTouch +Raphael, wrapper) • iWebkit (iphone oriented) • Jquery Mobile • You can write your own Js and Css UI. 35
- 38. Sencha Touch 37
- 39. iWebkit UI 38
- 40. Jquery UI 39
- 42. Rhodes 41
- 43. Rhodes Rhodes is a free and open source framework and the foundation for the RhoMobile application development platform. It enables developers to use their existing HTML, CSS, JavaScript and Ruby skills to build native apps for all popular operating systems, including iOS, Android, Windows Phone 8. 42
- 46. Titanium - Titanium Mobile by Appcelerator claims to take your hard won web skills and turn them into mobile app development skills. - It boasts support for letting you use JavaScript, HTML, and CSS. - It features a JavaScript API that provides access to native UI elements. - The bridge between the JavaScript and the native SDK reads your JavaScript and uses it to build views that have the same features and performance as an application written in that native language. 45
- 49. Mosync 48
- 50. Mosync • free and open source software development kit (SDK) for mobile applications. • is integrated with the Eclipse development environment. • dual license scheme; a commercial license and an open source GPL version 2 license. • produces native mobile applications for multiple platforms using C/C++, HTML5 scripting and any combination thereof. • The target group for MoSync are both web developers looking to enter the mobile space, as well as the ordinary PC/Mac desktop developer with knowledge in C/C++ development. 49
- 53. PhoneGap 52
- 54. PhoneGap • Popular mobile application development framework originally created by Nitobi. • Adobe Systems purchased Nitobi in 2011, rebranded it as PhoneGap, and later released an open source version of the software called Apache Cordova • Enables software programmers to build applications for mobile devices using JavaScript, HTML5, and CSS3. • Because browser support for HTML5-based device access is not consistent across mobile browsers, it embeds HTML5 code inside a native WebView on the device. • ? 53
- 59. Efficiency Tasks that usually would take you hours and hundreds of lines of code to write, can now be done in minutes with pre-built functions. Development becomes a lot easier, so if it’s easier it’s faster, and consequently efficient. 58 Pros
- 60. Security A widely used framework has big security implementations. The big advantage is the community behind it, where users become long- term testers. If you find a vulnerability or a security hole, you can go to the framework’s website and let the team know so they can fix it. 59 Pros
- 61. Cost - Support Most popular frameworks are free, and since it also helps the developer to code faster, the cost for the final client will be smaller. 60 As any other distributed tool, a framework usually comes with documentation, a support team, or big community forums where you can obtain quick answers Pros
- 62. You learn the framework, not the language If you’re using a framework and you know very little about the language behind it, you will learn the framework and not the language itself. The way you code jQuery is different from the way you code javascript. Simple put, if you know jQuery, it doesn’t mean you know javascript. 61 Cons
- 63. Limitation The framework’s core behaviour can’t be modified, meaning that when you use a framework, you are forced to respect its limits and work the way it is required. Make sure you choose a framework that suits your needs 62 Cons
- 64. Code is Public Since the framework is available to everyone, it is also available to people with bad intentions. It can be studied in order to know how things work and to find flaws that can be used against you. 63 Pros
- 65. Demonstration • http://tax.moumie.org/ (mobile website) • Genymotion (hybrid ) • Samsumg android (Hybrid) • Desktop version (Website) 64
- 66. Conclusion Whether you decide to build a native app or a mobile web app a proper planning is required and you should consider the following factors: business objectives, target audience, technical requirements and so on. Nevertheless mobile web is the next big Thing 65
- 67. References 1. http://venturebeat.com/2015/09/25/wait-what-mobile-browser-traffic-is-2x-bigger-than-app- traffic-and-growing-faster/ 2. http://sixrevisions.com/mobile/native-app-vs-mobile-web-app-comparison/ 3. http://bradfrost.com/blog/post/mobile-web-problems/ (See Mobile Web Cons slides screenshoot) 4. http://floatlearning.com/2011/07/which-cross-platform-framework-is-right-for-me/ 5. http://www.cssnewbie.com/best-free-css3-frameworks-2015/#.Vke8Ml6ScqL 6. http://www.1stwebdesigner.com/pros-cons-frameworks/ 7. http://www.smashingmagazine.com/2014/02/four-ways-to-build-a-mobile-app-part3- phonegap/ 66
- 69. Danke! 68
Editor's Notes
- From the mobile web to mobile apps, it’s quickly becoming as important or more important than the desktop. You need a mobile strategy for your business, if you don’t have one, you may be losing sales and customers. If you aren’t convinced, here are some figures that illustrate the importance of mobile. Mobile web browsing accounts for almost 1/3 of web traffic worldwide, and it is growing fast while desktop is declining. It’s only a matter of time until mobile overtakes desktop internet usage. (In fact, it already has in several countries.)
- Some of the criteria that might help choosing the right approach
- HTML pages Traditional Web application consists of HTML pages that contain the displayed data and the render information. Whenever a user initiates an event, it causes a request-response cycle with a page load and the execution of associated JavaScript functions. Offline Web application consists of a single HTML page without the need for loading of further HTML pages through the request-response cycles. The whole action is on one page. JavaScript These files contain the functions that are useful for handling the events initiated by a user on the HTML page. Cascading Style Sheet (CSS) It describes the way HTML page should be rendered. F or mobile devices, there are various JavaScript/CSS libraries and frameworks to deliver a near native user experience with Web applications (for example, iUi for the iPhone). Database The HTML5 standard introduced local database storage. It is implemented in current versions of the Apple® Safari browser . The browser provides an embedded database, with SQLite, that can be accessed from the JavaScript by processing SQL queries. The business data of the application model is stored here. Manifest The manifest file is the mandatory deployment descriptor component for an offline Web application. It simply lists all the files that need to be loaded.
- Mobile website works on all app platforms like Android, iOS, Windows, etc
- A whole bunch more Cookies, unsupported formats, advanced functionality, and a whole lot more contribute to mobile web users’ collective frustration. The Solution The solution is to achieve content parity. Give people what they want regardless of how they access the Web. Take
- Until recently, the most common mobile web strategy was to create a separate mobile-only website (or m. site). Having two separate sites means having to point the right device classes to the right experience. In theory, that sounds manageable. In practice, however, it’s a nightmare that barely anyone gets right.
- You can think of the WebView as a chromeless browser window that’s typically configured to run fullscreen. Hybrid mobile applications are built in a similar manner as websites. Both use a combination of technologies like HTML, CSS, and JavaScript. However, instead of targeting a mobile browser, hybrid applications target a WebView hosted inside a native container. This enables them to do things like access hardware capabilities of the mobile device. Hybrid apps are part native apps, part web apps. (Because of that, many people incorrectly call them “web apps”). Like native apps, they live in an app store and can take advantage of the many device features available. Like web apps, they rely on HTML being rendered in a browser, with the caveat that the browser is embedded within the app.
- Only way Phonegap can compete with Sencha is if you use it with some other HTML5 framework like jQuery Mobile. So basically your question is should I use Sencha Touch or Phonegap + some HTML5 framework. My advice would be, if you have time learn and use Sencha Touch. It alone works better than Phonegap + jQuery Moible.