This document discusses building modern applications in the cloud using hybrid mobile app development frameworks. It introduces three characters - a small business owner, freelance developer, and customer - who represent common user types for mobile apps. Their needs highlight requirements like cross-platform support, engaging UX, offline capabilities, and scalability. Hybrid apps are presented as a solution, allowing developers to write code once that runs on any device, while still providing native experiences. The document then explores the Ionic framework and Firebase platform as tools that make hybrid development easier by handling infrastructure and backend services. Examples are given of building to-do and chat apps with these tools.

1. Building modern applications in the
cloud
Olsi Karapici

2. Modern applications
New Trends & Needs

3. ● Small business owner trying to implement technology for client engagement
● Small budget, one man staff
● He wants to start small and then if business grows be able to scale up according to his needs
● He wants an app for all major mobile platforms and possibly also a web application, all of them in
the shortest time possible and the lowest cost.
Meet Apu

4. ● She is a young and bright freelance software developer very experienced in front end web
development and UX design.
● She has a great app idea.
● No experience on IT infrastructure and operations.
● Very low budget.
Meet Lisa

5. ● He uses his smartphone all the time.
● He wants the prettiest, greatest, full of functionalities app and he wants it NOW.
● The app better be available and engaging all the time, otherwise is just a tap away from being
uninstalled.
● He is always right!
Meet Bart

6. Modern apps
● Cross-platform support
● A great, seamless and engaging UX
design
● Real time synchronization across
user’s devices
● Offline Capabilities
● Vertical Scalability
● A lot of work !
● A lot of resources !!
● A lot of time !!!
● And yet a lot of work :/
...or not :)
● “Work Smarter...Not Harder”
Requirements

7. Apps development
Hybrid vs Native

8. ● Demand for mobile experiences has grown exponentially.
● The number of mobile phone users in the world is expected to pass the five billion mark by 2019*
● By 2022, 70% of all enterprise software interactions are expected to occur on mobile devices**.
Why mobile in the first place?
* https://www.statista.com/statistics/274774/forecast-of-mobile-phone-users-worldwide/
** Market Guide for Mobile ApplicationTesting Services - Gartner, June 2017

9. ● Hybrid apps are essentially just apps :)
● They’re downloaded from a platform’s app store or marketplace, and access the same native
features and hardware-based performance acceleration as any app built with a native SDK.
● Hybrid apps are built using open web technologies like JavaScript, HTML, and CSS, rather than the
proprietary or specialized languages used by iOS, Android, and others.
● Hybrid apps run in a full-screen browser, called a webview, that is invisible to the user.
● Hybrid-built apps can run on any platform or device, all from a single codebase, while still
delivering a native look and feel.
What is a Hybrid App?

10. Keep in mind that the decision to choose hybrid or native should be based on the unique goals of your
organization, the circumstances of a given project, and composition of your existing development
team.
Comparing Hybrid vs. Native

11. ● Write Once, Run Anywhere
○ Users get a great experience across platforms and devices
○ One codebase to worry about
● Use the skills that you already have
○ The web developer community is greater in size
○ HTML, CSS and JavaScript is easier to master (?)
● The Best UX Across Platforms
○ a great UX means a consistent app experience as your users move between platforms, devices, and modes of
interaction, including mobile and desktop browsers.
Why Hybrid?

12. Ionic Framework
Introduction

13. ● Website: http://ionicframework.com/
● Ionic is a powerful open source HTML5 SDK that helps you build native-feeling mobile apps and
Progressive Web Apps using web technologies like HTML, CSS, and Javascript.
● #1 most widely used hybrid mobile hybrid framework
What is Ionic ?

14. ● Apache Cordova + Twitter Bootstrap + Angular
● Think of Ionic as the front-end UI framework that handles all of the look and feel and UI
interactions
● “Bootstrap for Native,” but with support for a broad range of common native mobile components,
slick animations, and beautiful design.
What is Ionic ?

15. Framework Stack
Native SDK
Cordova
Angular
Ionic
Your App

16. Native Wrapper
WebView
Your Code
(Html/Js)
Top Down View
Cordova
API
Plugins

17. PaaS / BaaS
Ease the development and deployment process

18. ● The emergence of cloud computing represents a new paradigm of servitization, where a physical
product (software or hardware) is transformed into a service.
● SaaS, IaaS and PaaS
○ Software as a Service is servitization of software programs. (ex. Microsoft Office 365, Google Docs)
○ Infrastructure as a Service is servitization of infrastructures (ex. Amazon AWS, Google Compute Engine,
Azure Virtual Machines)
○ Platform as a Service is servitization of development platforms, (ex. Google App Engine, Azure Cloud
Services, Amazon AWS & Lambda)
Cloud Services

19. ● BaaS
○ Backend as a Service is servitization of backend functionalities ( Firebase, Parse, Kinvey etc.)
● Being an intermediate architecture between PaaS and SaaS, the essence of creating BaaS is to
meet the rapid development needs of the mobile Internet and to provide backend capabilities as
services
● With BaaS, developers can utilize the serviced backend capabilities to develop their software
solutions.
● While PaaS simplifies the application deployment process, BaaS simplifies the application
development process
BaaS - The Improvement of PaaS

20. Firebase
Introduction

21. ● A powerful BaaS platform for your mobile or web application.
○ Scalable, real-time, and flexible backend for your application
○ Develop without the hassle of managing servers or writing server-side code
● Focus on the user
○ Focus on creating extraordinary user experiences. Firebase will take care of the rest
○ Firebase can power your app's backend, including data storage, user authentication, static hosting, and more.
● Build for any device and build it fast!
○ Build cross-platform native & hybrid mobile and web apps with Android, iOS and JavaScript SDKs
○ With Firebase, you can store data and authenticate users in your app with just a few lines of code.
What is Firebase ?

23. Firebase Features
Analytics
● Free and unlimited analytics solution
● Unlimited reporting of 500 event
types, each with up to 25 attributes
● One dashboard to view user behavior
and cross-network campaign
performance
● Demographic segmentation, including
age, gender, and location, available
out-of-the-box

24. Firebase Features
Develop
● Realtime Database
○ Store and sync app data in realtime
● Authentication
○ Reduce friction with robust
authentication
● Cloud Messaging
○ Deliver and receive messages across
platforms reliably
● Storage
○ Store files with ease

25. Firebase Features
Develop
● Hosting
○ Deliver web content faster through
Google Cloud CDN
● Test Lab
○ Test in the lab, not on your users
● Crash Reporting
○ Keep your app stable

26. Firebase Features
Grow
● Notifications
○ Engage with users at the right
moment
● Remote Config
○ Customize your app on the fly
● App Indexing
○ Drive organic search traffic to your
app

27. Firebase Features
Grow
● Dynamic Links
○ Send users to the right place inside
your app
● Invites
○ Empower your users to share your
app
● AdWords
○ Acquire users with the reach of
Google

28. Firebase Features
Earn
● AdMob
○ Monetize through engaging ads

29. Demo 1: ToDo App

30. Demo 2: tChat

31. Questions?