building HTML hybrid app with ionic

Transcript

1. building HTML hybrid app
 with ionic @bonar

2. Nakano Kyohei Software Engineer Co-founder at @atmoph twitter: @bonar facebook:

   nakano.kyohei
3. None
4. None

5. building HTML hybrid app
 with ionic

6. Frontend != Web Service

7. HTML hybrid app

8. HTML Hybrid app w 8FCٕज़Λ࢖ͬͯ࡞ΒΕͨϞόΠϧΞϓϦ
   w )5.-$44+BWB4DSJQU
   Ͱ
   6*
   Λ࡞Γɺ8FC7JFX
   ΍ ίϯϙʔωϯτϒϥ΢β্Ͱಈ͔͢
   w ωΠςΟϒͷػೳ͸
   +BWB4DSJQU
   ܦ༝Ͱݺͼग़͢

9. None
10. None
11. None

12. building HTML hybrid app

13. Frontend Chaos Package management • npm • bower • component

    Task runner • grunt • gulp altJS • CoffeeScript • TypeScript JavaScript Framework • jQuery • AngularJS • vue.js • backbone.js…. CSS Style • SASS • LESS CSS Framework • bootstrap • PURE • Foundation...
14. None

15. hybrid app ಛ༗ͷ՝୊ w 6*
    ͷϓϩτλΠϐϯά
    w σόΠε࣮ػ্ʢ༷ʑͳղ૾౓ʣͰͷ֬ೝ
    w ΞϓϦετΞʹఏग़ग़དྷΔωΠςΟϒΞϓϦͷੜ੒

16. None

17. ionic • AngularJS based UI Framework (CSS/JavaScript) • UI ύʔπ͸

    directive ͱͯ͠දݱ͞ΕΔ • Apache Cordova Λಉࠝͯ͠ iOS/Android ΞϓϦ΋࡞ΕΔ • ionic ίϚϯυΛ࢖ͬͨ਽ܗੜ੒ • ionic view ΞϓϦΛ࢖࣮ͬͨػ֬ೝ

18. demo 1. UI Λͬ͟ͱ΢Σϒ্Ͱ࡞Δ 2. ϩʔΧϧʹνΣοΫΞ΢τ 3. ։ൃ & ςετ

    4. σόΠεʹμ΢ϯϩʔυͯ֬͠ೝ

19. $ ionic platform add (ios|android) $ ionic build ios build

    native app
20. None

21. ionic • HTML hybrid app ͷτʔλϧͳ։ൃϑϩʔΛࢧԉ͢Δ • ϓϩδΣΫτͷ਽ܗΛ؆୯ʹੜ੒ • ionic

    creator Λ࢖ͬͯ΢Σϒ্Ͱͬ͟ͱUIΛ࡞Δ • ionic view ͰσόΠε্Ͱͷݟͨ໨Λ֬ೝ • ΞΠσΟΞΛମݧͰ͖Δܗ·Ͱૣ࣋ͬͯ͘ߦ͘ࣄ͕Ͱ͖Δ • ionic ͷ UI ΍ AngularJS ࣗମ͕޷͖͡Όͳ͍ͱਏ͍͔΋

22. Thank you follow @bonar