building HTML hybrid app with ionic

Slide 1

Slide 1 text

building HTML hybrid app  with ionic @bonar

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

building HTML hybrid app  with ionic

Slide 6

Slide 6 text

Frontend != Web Service

Slide 7

Slide 7 text

HTML hybrid app

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

building HTML hybrid app

Slide 13

Slide 13 text

Frontend Chaos Package management • npm • bower • component Task runner • grunt • gulp altJS • CoﬀeeScript • TypeScript JavaScript Framework • jQuery • AngularJS • vue.js • backbone.js…. CSS Style • SASS • LESS CSS Framework • bootstrap • PURE • Foundation...

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

ionic • AngularJS based UI Framework (CSS/JavaScript) • UI ύʔπ͸ directive ͱͯ͠දݱ͞ΕΔ • Apache Cordova Λಉࠝͯ͠ iOS/Android ΞϓϦ΋࡞ΕΔ • ionic ίϚϯυΛ࢖ͬͨ਽ܗੜ੒ • ionic view ΞϓϦΛ࢖࣮ͬͨػ֬ೝ

Slide 18

Slide 18 text

demo 1. UI Λͬ͟ͱ΢Σϒ্Ͱ࡞Δ 2. ϩʔΧϧʹνΣοΫΞ΢τ 3. ։ൃ & ςετ 4. σόΠεʹμ΢ϯϩʔυͯ֬͠ೝ

Slide 19

Slide 19 text

$ ionic platform add (ios|android) $ ionic build ios build native app

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

ionic • HTML hybrid app ͷτʔλϧͳ։ൃϑϩʔΛࢧԉ͢Δ • ϓϩδΣΫτͷ਽ܗΛ؆୯ʹੜ੒ • ionic creator Λ࢖ͬͯ΢Σϒ্Ͱͬ͟ͱUIΛ࡞Δ • ionic view ͰσόΠε্Ͱͷݟͨ໨Λ֬ೝ • ΞΠσΟΞΛମݧͰ͖Δܗ·Ͱૣ࣋ͬͯ͘ߦ͘ࣄ͕Ͱ͖Δ • ionic ͷ UI ΍ AngularJS ࣗମ͕޷͖͡Όͳ͍ͱਏ͍͔΋

Slide 22

Slide 22 text

Thank you follow @bonar