Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Ionic Framework is good for creating apps
Search
kkeeth
November 21, 2018
Programming
1
120
Ionic Framework is good for creating apps
kkeeth
November 21, 2018
Tweet
Share
More Decks by kkeeth
See All by kkeeth
The history of Javascript frameworks: changes in front-end design philosophy
clown0082
2
95
Visually experience the beauty of mathematics with p5.js
clown0082
1
2.6k
Rediscover the joy of coding with Creative Coding
clown0082
0
1.3k
全員が意思決定する会社で開発者体験や生産性を見る大変さについて
clown0082
0
530
JavaScript × Mathematics go to Digital Art
clown0082
1
310
In-house study group at YUMEMI
clown0082
0
160
Playing Ionic Logo by p5.js
clown0082
0
210
Skills that employers recommend students to acquire
clown0082
1
250
Walking through the source code of an OSS Library(ESLint))
clown0082
0
340
Other Decks in Programming
See All in Programming
Jakarta EE as Seen Trough the Lens of the ASF
ivargrimstad
0
860
Piniaの現状と今後
waka292
2
520
4年間変わらなかった YOUTRUSTのアーキテクチャ
daiki1003
2
680
もう実家に手頃な情シス娘は不要!Bedrockでもう一人の娘を作る
komakichi
2
150
Golang と Erlang
taiyow
7
1.8k
知られざるNaNの世界
hole
3
1.1k
メルカリ ハロ アプリの技術スタック
atsumo
2
880
CSC509 Lecture 06
javiergs
PRO
0
130
GrafanaのHTTP API を眺めてみよう
rinchoku
0
470
Subclassing, Composition, Python, and You
hynek
3
190
Повторное использование кода в ML: почему ML-пайплайны могут помочь?
lamodatech
0
400
Micro Frontends for Java Microservices - dev2next 2024
mraible
PRO
0
230
Featured
See All Featured
Practical Orchestrator
shlominoach
186
10k
Gamification - CAS2011
davidbonilla
80
5k
Testing 201, or: Great Expectations
jmmastey
38
7k
Adopting Sorbet at Scale
ufuk
73
9k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Building an army of robots
kneath
302
42k
Into the Great Unknown - MozCon
thekraken
31
1.4k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Raft: Consensus for Rubyists
vanstee
136
6.6k
How to Ace a Technical Interview
jacobian
275
23k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
4.9k
Transcript
Ionic Framework is good for creating apps k-kuwahara @kuwahara_jsri clown0082
About me
About me const my_info = { Name: ‘܂ݪਔ’, Workplace: ‘Yumemi
Inc’, twitter: ‘kuwahara_jsri’, GitHub: ‘k-kuwahara’, Npm: ‘k-kuwahara’, }
Communities collaborator translator staff staff
Communities github.com/k-kuwahara
Let’s start the today’s Ionic talks !!
In the past: Web First ↓ Currently: Mobile First
Mobile First …?
Mobile First …? It’s Responsive!!
Mobile First = Responsive
Mobile First = Responsive ×
Mobile First ⊃ Responsive
Mobile First is … Optimizing UI/UX design for mobile
Mobile first example ‣ Design tailored to each terminal
Mobile first example 'JSTU1BJOU 'JSTU$POUFOUGVM1BJOU 'JSTU.FBOJOHGVM1BJOU 'VMMZ-PBEFE ‣ First view
optimized for mobile
For more mobile first ⚡AMP (Accelerated Mobile Pages) PWA (Progressive
Web Apps)
‣ Served over HTTPS PWA examples ‣ Add to home
screen APP
PWA examples ‣ Offline Experience ‣ Push Notifications
How to make it PWA? See “Progressive Web App Checklist”.
URL: https://developers.google.com/web/progressive-web-apps/checklist See “Your First Progressive Web App”. URL: https://codelabs.developers.google.com/codelabs/your-first-pwapp/ index.html?index=..%2F..%2Findex#0
Web with PWA ≒ Mobile Application
In recently years, Develop applications with HTML5
So, how about “Ionic Framework” ?
What is “Ionic Framework”?
What is “Ionic Framework” ? image by: https://ionicframework.com/
What is “Ionic Framework” ? image by: https://ionicframework.com/
What is “Ionic Framework” ? +
What is “Ionic Framework” ? Android iOS Web
What is “Ionic Framework” ? UI Base WebView
What is “Ionic Framework” ? UI Base WebView Ionic Native
Native API Cordova API
Ionic v4 + other frameworks
Ionic + other frameworks +
Ionic + other frameworks +
Q. How do we get started?
Step1: install nodejs Please install
Step2: execute the following commands
For example
Step3: place component in html file image by: https://ionicframework.com/docs/components/
Step4: write the logic to the ts file
See also: for details URL: https://qiita.com/clown0082/items/5405c53eb955f985edda
Q. What are the features of Ionic framework?
Summary of Ionic features 1. PWA(by default) 2. It's fun
to develop 3. Support of slack is profound 4. Clean, simple, and functional 5. Abundant API to native function
Q. But, it's really difficult, isn’t it?
A. It is roughly No. (The difficult point is Angular)
Application Example: ʮϗϏϯΰʯ Web URL: https://app.houbingo.com App URL : https://play.google.com/store/apps/details?id=com.houbingo
This app was developed by a designer about 3 days.
with this book ↓
Let’s Create Mobile Application by Ionic Framework!!
None