1 of 25

Building hybrid apps with

1

2 of 25

AGENDA

  • What is ionic?
  • Why ionic?
  • How do ionic works? (fwk Architecture)
  • Ionic Components
  • Ionic Pro
  • Coding Session
  • StencilJs
  • Ionic vs ReactNative
  • Ionic Experts
  • Conclusions and Q&A

2

2

3 of 25

What is Ionic?

  • Html5 framework officially designed for mobile apps.
  • Based on TypeScript, Angular 2 and Cordova.
  • iOS, Android and WP supported.
  • Open source (github repo).

3

3

4 of 25

Why Ionic?

  • Build hybrid apps with small ramp up.
  • Don't need native skill.
  • Apps look native and performance is getting better.
  • You can’t know everything.
  • Community and support are growing up.
  • Based on Progressive Web Apps.

4

4

5 of 25

How do Ionic works? fwk Architecture

5

5

6 of 25

How do Ionic works? Angular Architecture

6

6

7 of 25

How do Ionic works? Technology stack

7

7

8 of 25

Ionic Components - Lifecycle

8

8

9 of 25

Ionic Components - Lists

9

9

10 of 25

Ionic Components - Menu

10

10

11 of 25

Ionic Components - Toggle

11

11

12 of 25

Ionic Pro

12

12

13 of 25

Ionic Pro

13

13

14 of 25

Coding Session

Let's build an app

14

14

15 of 25

StencilJs

15

15

15

16 of 25

Ionic or React Native?

Both are hybrids but different

  • Ionic is 100% code once
  • React has better performance
  • Both have good community�

​

​

​

It depends of your needs, try and decide

16

16

16

17 of 25

Ionic or React Native? Showcases

17

17

17

18 of 25

Ionic Experts to follow on Twitter

  • Josh Morony - @joshuamorony (ionic and stencil)
  • Jorge Vergara - @javebratt (firebase, firestock)
  • Max Lynch - @maxlynch (ionic and stencil co founder)
  • Adam Bradley - @adamdbradley (ionic and stencil co founder)
  • Mike Hartington- @mhartington (ionic and stencil)
  • Justin Willis - @Justinwillis96 (ionic and stencil)

​

​

​

​

18

18

18

19 of 25

Tweets

19

19

19

20 of 25

Tweets

20

20

20

21 of 25

Tweets

21

21

21

22 of 25

Conclusions - Pros

  • Web developers can build ios, android and wp apps.
  • One code, multiple platforms.
  • Look and feel similar to native.
  • Ionic Pro.
  • Based on Progressive Web Apps.
  • No need for experts on each platform, less budget.
  • Active support and community.

22

22

22

23 of 25

Conclusions - Cons

  • Not native performance, but hardware is growing up.
  • Issues on specific platforms, harder to resolve.
  • Dependency with Typescript, Angular and plugins.
  • Other fwks have better performance (react native / native script)�

23

23

23

24 of 25

Building hybrid apps with Ionic

Questions?

@salimchemes

24

24

24

25 of 25

Building hybrid apps with Ionic

Thanks

@salimchemes

25

25

25