Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Ionic Framework is good for creating apps
Search
kkeeth
November 21, 2018
Programming
150
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Ionic Framework is good for creating apps
kkeeth
November 21, 2018
Transcript
48 slides
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
More Decks by kkeeth
See All by kkeeth
Programming to play with p5.js
clown0082
0
130
とある EM の初めての育休からの学び
clown0082
1
6.1k
The history of Javascript frameworks: changes in front-end design philosophy
clown0082
2
260
Visually experience the beauty of mathematics with p5.js
clown0082
1
3.4k
Rediscover the joy of coding with Creative Coding
clown0082
0
2k
全員が意思決定する会社で開発者体験や生産性を見る大変さについて
clown0082
0
690
JavaScript × Mathematics go to Digital Art
clown0082
1
490
In-house study group at YUMEMI
clown0082
0
250
Playing Ionic Logo by p5.js
clown0082
0
380
Other Decks in Programming
See All in Programming
DroidKnights 2026 Android A2UI Jetpack Compose 기반의 안전한 AI UI 렌더링 - 박제창
itsmedreamwalker
1
230
AI Augmentation Techniques with Liberty
ivargrimstad
1
480
Goコンパイラを作ってGoをもっと理解する / Build a Go compiler to better understand Go
ikura_hamu
0
130
Spec-driven Development with AI
simas
PRO
0
2.3k
コード生成時代のAPI定義を支えるRequest Spec移行
pvcresin
0
130
ビジネスロジックを堅牢に~Scala 3のドメインプリミティブ~
j5ik2o
0
170
Seven New Principles of Software Engineering
yegor256
0
500
Crash Auto Pipelines
veronikapj
1
410
動画プレイヤーはなぜカクつくのか 〜Flutterのレンダリングとネイティブの境界を解剖する〜
naruogram
0
340
エージェントを使い続けるためのメタワーク / Meta-work for keeping using the agent
rkaga
6
2.3k
graphql-ruby を Spinel で速くしようとした話
mtsmfm
0
150
protojson における文字化けの扱い
kazuki1023
0
420
Featured
See All Featured
ラッコキーワード サービス紹介資料
rakko
5
5.8M
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.9k
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
620
Documentation Writing (for coders)
carmenintech
77
5.6k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
980
VelocityConf: Rendering Performance Case Studies
addyosmani
331
25k
30 Presentation Tips
portentint
PRO
1
470
Claude Code のすすめ
schroneko
67
230k
Side Projects
sachag
456
43k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
2
520
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
1
600
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
940