Hybrid Mobile Development: Best of Both Worlds
•Download as PPTX, PDF•
1 like•4,582 views
Rashmika Nawaratne is a software craftsman at 99X Technology specialized in hybrid mobile development. Hybrid apps allow developers to build once and deploy across platforms like iOS, Android, and Windows using web technologies like HTML, CSS, and JavaScript. This provides maximum reach for users while allowing easy testing and deployment. While native apps may be more powerful, hybrid apps offer significant advantages in speed of development and ability to target multiple platforms simultaneously. Rashmika advocates for the Apache Cordova framework for its wide community support, complete ecosystem, and ability to access device features through plugins.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Hybrid Mobile Development: Best of Both Worlds
Similar to Hybrid Mobile Development: Best of Both Worlds (20)
More from Rashmika Nawaratne
More from Rashmika Nawaratne (12)
Recently uploaded
Recently uploaded (20)
Hybrid Mobile Development: Best of Both Worlds
- 3. hello! I am Rashmika Nawaratne Software craftsman at 99X Technology Specialized in Hybrid Mobile Domain
- 4. Mobile Enablement simple but not easy Hybrid App Development
- 6. Why?
- 8. Why? How?
- 9. Reaching user the fastest way ✘ Platform independent ✘ Accessible from anywhere ✘ Super fast learning curve for development ✘ Easy test and deploy
- 10. Get the maximum reach in audience ✘ Download from AppStore, GooglePlay and Windows Store ✘ Accessible anytime ✘ Offline support ✘ Full device access
- 11. Reaching your focus audience iOS ✘ Mac OS | Xcode ✘ Objective C W: 30% | E: 41% | A: 15% SL: 5.17% Android ✘ Win/Mac/Linux OS ✘ Java W: 55% | E: 53% | A: 62% SL: 62.24% Windows ✘ Windows ✘ XAML and ( C#.NET or VB.NET ) W: 2% | E: 3% | A: 1.6% SL: 3.75% W: Worldwide | E: Europe | A: Asia | SL: Sri Lanka From October 2014 to October 2015
- 13. Best from both the worlds
- 14. Why? How? What?
- 15. Depth of Hybrid Knowledge
- 17. Best of both worlds ✘Native app with embedded HTML ✘One app for many platforms ✘Full device access ✘Access anytime anywhere (Offline support) ✘AppStore / Windows Store / Google Play ✘Use your preferred language ✘Learn fast and build faster
- 18. Myths! ✘They are just websites in app-stores ✘You can’t access mobile features ✘Native apps are more beautiful ✘Slow!
- 20. Hybrid Technologies Xamarin Studio ✘ Freemium by Xamarin ✘ Mac, Windows, Microsoft Visual Studio ✘ Write in C# Appcelerator Titanium ✘ Open Source by Appcelerator Inc ✘ Mac, Windows, Linux, Web / Cloud ✘ Write in Web technologies Apache Cordova ✘ Open Source by Apache ✘ Mac, Windows, Linux, Web / Cloud ✘ Write in Web technologies PhoneGap Open Source by Adobe Mac, Windows, Linux, Web / Cloud Write in Web technologies Qt Creator Open Source by Qt Project Mac, Windows, Linux, BSD Use cross-platform C++, JavaScript and QML React/React Native ✘ Open Source by Facebook ✘ iOS, Android ✘ Write in JS
- 21. “Oh No! The Zuck has spoken!”
- 22. Are You Building the Facebook app? ✘Have a multi-million dollar budget? ✘Have a large team of experienced native developers? ✘Does your billion-dollar revenue depend on this app? ✘If so...do native ✘...but today it's not so black and white
- 24. I choose Apache Cordova ✘ Widest community support ✘ Complete Eco-system ✘ Plugins to support device 767 as at 2.30pm 13/11/2015
- 25. Concept behind hybrid development - Cordova
- 26. Technical Architecture - Cordova
- 27. Getting Started... Install Cordova Download Mobile Framework Get the Bootstrap code Test from Browser Emulator Build the app Push to Cloud ✘ jQuery Mobile ✘ Ionic ✘ Onsen UI ✘ Intel XDK ✘ Kendo UI ✘ Sencha Touch
- 28. Welcome Ionic ✘ Web Technologies You Already Know and Love HTML5 / JS / CSS ✘ Standing on the Shoulders of AngularJS ✘ Native Focused – build to work with Cordova ✘Performance Obsessed ✘Ionicons ✘Eco System of Services (Auth, Push, Analytics, Deploy, View)
- 29. “How does it all come together?” WebView (Cordova) Native SDK AngularJS Ionic Your App
- 31. Moving forward… 1. Intro to Hybrid Mobile Domain 2. Create and build an Ionic project using the CLI 3. Debug and test Ionic project 4. Build a modern mobile UI using Ionic components 5. Access REST services 6. Use controllers and routing 7. Extending core Ionic capabilities using plugins 8. Ionic ecosystem: Push, Auth, Analytics, Deployment, Marketplace
- 32. What you need first?
- 33. Happy Coding! You can find me on @razmik89 RashmikaN@99x.lk blog.nawaratne.com
- 34. Credits Special thanks to all the people who made and released these awesome resources for free: ✘Presentation template by SlidesCarnival ✘Photographs by Unsplash
Editor's Notes
- Good morning everyone. One key factor behind every successful startup is the idea. Today I’m going to give you some tips on how that idea can be taken to the mass audience in the minimum time frame. How?
- Simple using mobile. Why Mobile? Any idea? Mobile is the market with the highest number of audience. By October 2014 something cool happened. # mobile phones (SIM) overtook the # human So if you have an cool idea, You can simply take that to a large target audience in no time. With mobile!
- I am Rashmika Nawaratne Senior Software Engineer at 99X Technology For around 2 years, I am specializing in Hybrid Mobile Domain, starting with Sencha, then moving into jQuery Mobile and then Ionic.
- Today I'm going to give my few cents, on Hybrid Mobile Development. Earlier did same presentation focuing on business aspect. But today, let me focusing more into technology aspects. But the tagline – simple but not easy – it’s still valid! So as a developer when you hear the word Hybrid , what comes to your mind? (Stickers giveaway…) Android, Xcode, Java, Objective C.. what else? Hmm let’s see at the end whether I’ll be able to change your mindset.
- What I’m going to talk about ME? Just 3 things. Why? Why would you need mobile app when you can simple craft your startup idea in 100s of ways. How? How you can move forward with mobile enablement. What to consider and what to forget. What to learn and what to unlearn. What? What you would need to do to get your business idea into your handheld device. Specially tools and techniques. Basically I’m going to tell you one way to transform your business focus into technical focus in the mobile arena.
- WHY
- Imagine you a super cool idea for an app - Person identification app. You take a picture of person and it will show all the info about him, his Facebook profile, LinkedIn info, contact details and his bio. Now - build, sell and make money. For success of this app, what do you need to do? There are plenty. But focusing on the most important, Widest… "Which users am I going to focus?" Generation X people, Gen Y, school kids, only women, nerds, geeks or a specific category of people, maybe Police or FBI. Time is money. The time for development is a concern since it’s one of the main gaps between your idea and actual product. With all above concerns, is it possible your app to go to the market, before anyone else does?
- And now the HOW. The million dollar question - HOW would you drive technical focus to support the business focus?
- Winning product ->Speed to market and widest user reach. If you ask anyone, how to create an app super fast most would say - website or web app. And since everyone has a computer or mobile phone has access to web browser, then to your app. So if we use a webapp, we can reach the maximum from our target audience, and can reach super fast. Its just a matter of hosting the app in a server, and allowing users to browser the URL.
- But what if user wants more interaction with the app? More personalize and want to use it when they are not connected to web. Mobile. What cool stuff comes from mobile arena; Full device access - you can access all the phone features like camera, contact list, SMS, browser, etc. Can download from AppStore, GooglePlay and Windows Store Accessible anytime from your handheld device Offline support - you can use any app even without connecting to the web Mobile App as by today, there are more active mobile devices than human in the world. [International Business Times] Why it differs from web?
- The Vendors! Event when we take only mobile, there are plentry of different platofrms unlike web. If web, it’s somehow only JS/CSS and HTML with minor differences for different browsers. Traditional native mobile development is restricted to iOS, Android & Windows. If we take number wise, you can see, from region to region, country to country, the usage of main mobile platforms change. So having to have multiple platforms, might be a option on large scale distribution. Wouldn't it be dreamy if we can combine pros of both web and mobile in one app plus have one single platform to reach all mobile platforms, and use it to reach the market super fast?
- So we have web and mobile arena. Concerns, fastest development and best user experience. Web and Mobile.
- Another context: You want to go out in sunlight and have fun eating junk food and sleeping while being a Edward-like vampire. On the other hand, Control when you need to transform into a wolf and control yourself when you are a wolf while being a Jacob-like werewolf. Without needing new jeans and shirts every time after you burst yourself to a wolf.
- What?
- Hybrid Mobile Development technology came to arena after 2010, and been ever evolving with many supportive platforms.
- Since each native application only runs on one platform, businesses building native apps must make a choice--build for one platform or build for multiple platforms? If you are going for all 3 main platforms you will have to develop 3 mobile apps. Source: http://www.mrc-productivity.com/research/whitepapers/NativeAppsWrongChoice.pdf
- Throughout it's development, there are few myths as well... 1. They are just websites in app-stores : No they are not just websites. They are mobile apps which gives the same user experience as any iOS, Android or Windows app gives. Don't just listen to me. Try for yourselves Evernote | Amazon 2. You can't access Mobile Device Features: Ha ha. Try Evernote image capturing for a change. And to boast there are 649 plugins to use device features by 12.50 PM on 15th October 2015. By the time you read, this number is definitely increased. See the plugins repository. 3. Native apps are more beautiful: Again I'd ask you to refer above apps. And these ones which are presented in this slideshare presentation. On the other hand I'd say this is totally depend on your competency in CSS. Limit is beyond horizon if you can do the UI nicely. And with the 1001 opensource UI frameworks available, you definetely can do a better UI with HTML5/CSS than native android or iOS for sure! 4. Hybrid Mobile apps are slow: Hmm Let me come to that in few mins.
- I hope this is what you all geeks been waiting for. What are the available tools we can use to convert your app to android? Or iOS.
- Apache Cordova has the widest community support Eco-system to make developers' life comfortable I found it super cool to work with :-) Today, most hybrid mobile applications leverage Apache Cordova, a platform that provides a consistent set of JavaScript APIs to access device capabilities through plugins, which are built with native code. As a side note, Apache Cordova originally started as a project named PhoneGap. These days, PhoneGap exists as a distribution of Apache Cordova that includes additional tools.
- Step 1: Initially you have a website. You have your (Html, CSS, JS) Lets say you have, index.html app.js style.css Step 2: Then you process it through ApacheCordova (PhoneGap). Basically compile, build and release. How: cordova build android ios | upload your web files to PhoneGap Cloud. Step 3: The output will be the native mobile app. Mobile app for iOS, Android, Windows, Blackberry or your preferred mobile platform. Remember my tag line? Simple but not easy. Simple as that.
- At the bottom you have the Mobile OS. (Android, iOS, Windows, etc.) On top of that, you have your PhoneGap Application. Inside the PhoneGap Application, you have HTML Rendering Engine at the bottom. Basically a web view. On top of the web view is your web app (Your index.html, app.js, style.css) Separately there will be PhoneGap Plugins, and your app can connect to them through the html rendering engine. The plugin will directly contact the Mobile OS via OS APIs. So you can imagine it as, Cordova will create a native app with a web browser, and run your web-app (html/css/js) inside the web browser. Seems quite a lot to digest? No. Nothing to worry. You only have to think of the Web App Layer :-)
- First you install Apache Cordova. Then the development of your app. The first approach would be write your app code from scratch. Doable, however its quite a considerable amount of work if you are a beginner. Even you are a pro, I'd say you can use existing mobile UI framework and customize based on your requirements, which is straightforward and hell a lot of time saver. Okay cool. What are the available mobile UI frameworks? If you are familier with AngularJS - Go for Ionic. Else start with jQuery Mobile.
- Native Focused Modeled off of native SDKs Built to work with Cordova Performance Obsessed Hardware accelerated animations Minimal DOM Manipulation Remove 300ms tap delay Plain ol' CSS Cohesive visual system Clean and simple Easy to customize Stand-alone CSS (independent of Ionic's JavaScript) Ionicons Over 700 MIT licensed font-icons included
- Source: http://www.slideshare.net/lucio_grenzi/use-ionic-framework-to-develop-mobile-application
- https://ccoenraets.github.io/ionic-tutorial/
- http://www.tutorialspoint.com/ionic/ionic_environment_setup.htm We will start with https://ccoenraets.github.io/ionic-tutorial/index.html