AngularNYC | AngularNYC - Ultimate hybrid Angular apps overview - Sani Yusuf @Angularnyc | Uploaded October 2017 | Updated October 2024, 4 hours ago.
You and your team have this great Idea and you have your users using different devices and operating systems to access the same application. Some users are on the Web, some on Mobile some of their Desktop and you also have to worry about what operating system they are on and also have to consider how your application is presented on each device & operating system.
What if there was a way to code your app without worrying too much about operating systems/devices/screen sizes and just focusing on getting your idea across to your users regardless. Join me on a journey where I show you how to use Angular, Ionic & the PWA standard to build apps for IOS, Android, Windows, Web, Mac & PC with the same code all using just HTML5.
DISCALAIMER
The slides for this talk were originally created for AngularMIX conference, however Sani is using them for his other talks too.
CONTENTS
0:05 - Intro
1:05 - The web is everywhere
3:17 - Can you spot the web app
3:48 - All those apps are build with web technologies
5:01 - It's all about devices
6:36 - Same app different experience
7:27 - So what's the issue
7:45 - Same app different tools
9:58 - Suddenly new manager is hired
10:54 - Poor you
CROSS-PLATFORM DEVELOPMENT
11:18 - Is there a better way for cross-platform development?
11:33 - Things to note
12:41 - Why can't we web everything?
12:44 - Let's create a typical use case
SOLVING MOBILE PROBLEM
13:19 - Let's solve mobile
13:57 - Things we want to achieve
17: 32 - Introducing Cordova
14:46 - Features of Cordova
16:17 - Mobile problem solved? Not really
16:19 - Mobile platforms have different behavior
19:40 - Introducing Ionic
20:23 - Features of Ionic
20:26 - Superb cross-platform components
21:51 - 1st class CLI tool
23:59 - Other features
24:32 - Who's using Ionic
25:23 - Ionic DEMO
41:51 - Mobile problem solved
SOLVING WEB PROBLEM
43:01 - Let's solve web problem
43:11 - It's all about adapting to screen size
44:42 - Ionic adaptive markup DEMO
PROGRESSIVE WEB APPS
50:12 - What about PWA
50:26 - What is PWA
51:30 - More about Service Worker
55:34 - Service Worker DEMO
1:04:40 - Question: Is service worker supported by FireFox?
1:06:15 - Web problem finally solved
1:06:20 - About service worker API
SOLVING DESKTOP PROBLEM
1:07:34 - About desktop apps
1:08:32 - Introducing Electron
1:08:37 - About Electron
1:09:13 - Some apps using electron today
1:10:00 - Electron DEMO
1:16:29 - Question: How do you deploy and share the app?
1:17:53 - Question: Does Ionic use Material Design by default?
1:19:27 - Question: You’re storing your app in ServiceWorker. Are bundle files stored there as well?
1:20:40 - Question: How do you manage differences between OS versions?
1:21:47 - Desktop problem solved
ADDITIONAL TOOLS
1:22:51 - Other things to beware of
1:22:55 - Ionic Pro
1:25:05 - Stencil JS
1:25:28 - Sani's Bold Predictions
1:27:46 - UI.School online course
QUESTIONS
1:29:26 - What should replace JS frameworks?
1:31:13 - How many years of experience required to develop professional apps with AngularJS?
1:33:51 - Do you have an opinion on NativeScript?
1:35:26 - Is performance of web apps slow when compare to native?
RESOURCES
Slides
slides.com/saniyusuf/6-apps-one-code-with-angular6-apps-one-code-with-angular#
Ionic site
ionicframework.com
Ionic Pro
ionicframework.com/products
Stencil JS
github.com/ionic-team/stencil
Electron site
electron.atom.io
UI.School online course
https://ui.school
Sani's Blog
saniyusuf.com
Sani's Twitter
twitter.com/saniyusuf
Josh Morony's site
joshmorony.com
You and your team have this great Idea and you have your users using different devices and operating systems to access the same application. Some users are on the Web, some on Mobile some of their Desktop and you also have to worry about what operating system they are on and also have to consider how your application is presented on each device & operating system.
What if there was a way to code your app without worrying too much about operating systems/devices/screen sizes and just focusing on getting your idea across to your users regardless. Join me on a journey where I show you how to use Angular, Ionic & the PWA standard to build apps for IOS, Android, Windows, Web, Mac & PC with the same code all using just HTML5.
DISCALAIMER
The slides for this talk were originally created for AngularMIX conference, however Sani is using them for his other talks too.
CONTENTS
0:05 - Intro
1:05 - The web is everywhere
3:17 - Can you spot the web app
3:48 - All those apps are build with web technologies
5:01 - It's all about devices
6:36 - Same app different experience
7:27 - So what's the issue
7:45 - Same app different tools
9:58 - Suddenly new manager is hired
10:54 - Poor you
CROSS-PLATFORM DEVELOPMENT
11:18 - Is there a better way for cross-platform development?
11:33 - Things to note
12:41 - Why can't we web everything?
12:44 - Let's create a typical use case
SOLVING MOBILE PROBLEM
13:19 - Let's solve mobile
13:57 - Things we want to achieve
17: 32 - Introducing Cordova
14:46 - Features of Cordova
16:17 - Mobile problem solved? Not really
16:19 - Mobile platforms have different behavior
19:40 - Introducing Ionic
20:23 - Features of Ionic
20:26 - Superb cross-platform components
21:51 - 1st class CLI tool
23:59 - Other features
24:32 - Who's using Ionic
25:23 - Ionic DEMO
41:51 - Mobile problem solved
SOLVING WEB PROBLEM
43:01 - Let's solve web problem
43:11 - It's all about adapting to screen size
44:42 - Ionic adaptive markup DEMO
PROGRESSIVE WEB APPS
50:12 - What about PWA
50:26 - What is PWA
51:30 - More about Service Worker
55:34 - Service Worker DEMO
1:04:40 - Question: Is service worker supported by FireFox?
1:06:15 - Web problem finally solved
1:06:20 - About service worker API
SOLVING DESKTOP PROBLEM
1:07:34 - About desktop apps
1:08:32 - Introducing Electron
1:08:37 - About Electron
1:09:13 - Some apps using electron today
1:10:00 - Electron DEMO
1:16:29 - Question: How do you deploy and share the app?
1:17:53 - Question: Does Ionic use Material Design by default?
1:19:27 - Question: You’re storing your app in ServiceWorker. Are bundle files stored there as well?
1:20:40 - Question: How do you manage differences between OS versions?
1:21:47 - Desktop problem solved
ADDITIONAL TOOLS
1:22:51 - Other things to beware of
1:22:55 - Ionic Pro
1:25:05 - Stencil JS
1:25:28 - Sani's Bold Predictions
1:27:46 - UI.School online course
QUESTIONS
1:29:26 - What should replace JS frameworks?
1:31:13 - How many years of experience required to develop professional apps with AngularJS?
1:33:51 - Do you have an opinion on NativeScript?
1:35:26 - Is performance of web apps slow when compare to native?
RESOURCES
Slides
slides.com/saniyusuf/6-apps-one-code-with-angular6-apps-one-code-with-angular#
Ionic site
ionicframework.com
Ionic Pro
ionicframework.com/products
Stencil JS
github.com/ionic-team/stencil
Electron site
electron.atom.io
UI.School online course
https://ui.school
Sani's Blog
saniyusuf.com
Sani's Twitter
twitter.com/saniyusuf
Josh Morony's site
joshmorony.com
