Building Hybrid Apps with AngularJS and Ionic

1

Building Hybrid Apps with AngularJS and Ionic

2

• Younes Adounis• CTO @ Synergie Media• Agadir, Maroc• @unees15• Adounisyounes.com

3

Overview1. Native vs Hybrid Apps2. Intro Ionic3. UI Components4. Ionic CLI5. Demos

4

The Downsides of Native• Proficiency in each platform required• Entirely separate code bases• Timely & expensive development• Diminishing returns

5

More Platforms. More Problems.

Why are we still coding for multiple platforms?

6

“ Is there an alternative? ”

7

• Hybrid Apps: HTML5 that acts like native• Phonegap renamed to Cordova• Web wrapped in native layer• Direct access to native APIs• Familiar web dev environment• Develop a single code base (web platform)

8

• 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

Are You Building the Facebook app?

9

“ Hybrid apps are slow ! ”

10

Mobile devices have rapidly improved!

Year Device Processor RAM2007 iPhone 620 MHz 128 MB2010 iPhone 4 1 GHz 512 MB2016 iPhone 6s 1.8 GHz dual-core 2 GB

11

• Common UI• Views• Navigation and stack history• Transitions• Gestures

Native SDKs Are Great

12

• It's the wild-west for hybrid apps• We need to bridge the gap between web and native• We need rich, native-style UI components and interactions• We need UI APIs, not just jQuery widgets

There's No Web SDK

13

14

15

16

17

18

19

20

21

UI Component Overview

22

23

24

25

26

27

28

29

Ionic CLI

30

Ionic CLI

$ npm install -g ionic cordova

$ ionic start myapp sidemenu

$ cd myapp

$ ionic serve

31

32

33

34

THANK YOU