In questo talk ho spiegato perchè secondo me JS ha vinto la battaglia del web e come ionic e capacitor superano il concetto di app ibrida con le native progressive web apps

1. IONIC 4
+
ANGULAR 7
+
CAPACITOR
21 Marzo 2019
Marino Di Clemente
@kernelfolla
Web Developer

3. #1 PERCHÈ JS?

5. –David Wheeler
“All problems in computer science can be solved by
another level of indirection”.
INDIRECTION
“Compatibility means deliberately repeating other
people's mistakes.”.
COMPATIBILITY

6. https://xkcd.com/1266/

7. add
ABSTRACT SYNTAXTREE
INTERMEDIATE
REPRESENTATION
STACK BASED VIRTUAL MACHINE

8. push u
add
ABSTRACT SYNTAXTREE
INTERMEDIATE
REPRESENTATION
STACK BASED VIRTUAL MACHINE

9. add
push u
add
ABSTRACT SYNTAXTREE
INTERMEDIATE
REPRESENTATION
STACK BASED VIRTUAL MACHINE

10. multiply
add
push u
add
ABSTRACT SYNTAXTREE
INTERMEDIATE
REPRESENTATION
STACK BASED VIRTUAL MACHINE

11. push z
multiply
add
push u
add
ABSTRACT SYNTAXTREE
INTERMEDIATE
REPRESENTATION
STACK BASED VIRTUAL MACHINE

12. push y
push z
multiply
add
push u
add
ABSTRACT SYNTAXTREE
INTERMEDIATE
REPRESENTATION
STACK BASED VIRTUAL MACHINE

13. push x
push y
push z
multiply
add
push u
add
ABSTRACT SYNTAXTREE
INTERMEDIATE
REPRESENTATION
STACK BASED VIRTUAL MACHINE

14. push x
push y
push z
multiply
add
push u
add
INTERMEDIATE
REPRESENTATION
STACK BASED VIRTUAL MACHINE
EXECUTION
STACK

15. push x
push y
push z
multiply
add
push u
add
INTERMEDIATE
REPRESENTATION
STACK BASED VIRTUAL MACHINE
X
EXECUTION
STACK

16. push x
push y
push z
multiply
add
push u
add
INTERMEDIATE
REPRESENTATION
STACK BASED VIRTUAL MACHINE
Y
X
EXECUTION
STACK

17. push x
push y
push z
multiply
add
push u
add
INTERMEDIATE
REPRESENTATION
STACK BASED VIRTUAL MACHINE
Z
Y
X
EXECUTION
STACK

18. push x
push y
push z
multiply
add
push u
add
INTERMEDIATE
REPRESENTATION
STACK BASED VIRTUAL MACHINE
Y*Z
X
EXECUTION
STACK

19. push x
push y
push z
multiply
add
push u
add
INTERMEDIATE
REPRESENTATION
STACK BASED VIRTUAL MACHINE
(Y*Z)+X
EXECUTION
STACK

20. push x
push y
push z
multiply
add
push u
add
INTERMEDIATE
REPRESENTATION
STACK BASED VIRTUAL MACHINE
U
(Y*Z)+X
EXECUTION
STACK

21. push x
push y
push z
multiply
add
push u
add
INTERMEDIATE
REPRESENTATION
STACK BASED VIRTUAL MACHINE
((Y*Z)+X)+U
EXECUTION
STACK

22. 1975 NIKLAUS WIRTH PASCAL
P-CODE MACHINE

23. 6 AGOSTO 1991
TIM BERNERS LEE
PUBBLICA IL PRIMO SITO WEB

24. 23 GENNAIO 1993
MARC ANDREESSEN E ERIC BINA
PUBBLICANO MOSAIC

25. 23 MAGGIO 1994
JIM(JAMES) CLARK E MARC ANDREESSEN
PUBBLICANO
NETSCAPE NAVIGATOR

26. 23 MAGGIO 1995
SUN PUBBLICA JAVA

28. https://en.wikipedia.org/wiki/Lars_Bak_(computer_programmer)
~1999 - Java Hotspot (JIT)

29. MAGGIO 1995
A 34 ANNI BRENDAN EICH
SCRIVE JAVASCRIPT IN 10 GIORNI
https://www.youtube.com/watch?v=GxouWy-ZE80
ispirato da SCHEME(dialetto del LISP) per il FRONTEND
ispirato da JVM per il BACKEND

30. So in 10 days in May 1995, I wrote
A lexical scanner and parser for early JS
The parser emitted stack-machine bytecode
Which ran in a bytecode interpreter
Function.prototype.toString bytecode decompiler
The standard library was poor
Array was Object with .length property
Date hand-ported (h/t ksmith@netscape.com) from java.util.Date
https://brendaneich.com/2015/06/from-asm-js-to-webassembly/

31. 16 AGOSTO 1995
MICROSOFT PUBBLICA
INTERNET EXPLORER

34. 2007 - IPHONE
https://www.youtube.com/watch?v=y1B2c3ZD9fk&feature=youtu.be&t=4414

35. 10 LUGLIO 2008 - APP STORE
2 SETTEMBRE 2008 - CHROME
23 SETTEMBRE 2008 -ANDROID

36. DALVIK ART
ANDROID != JAVA

40. –Steve Jobs
“New open standards created in the mobile era, such
as HTML5, will win on mobile devices (and PCs too).
Perhaps Adobe should focus more on creating great
HTML5 tools for the future, and less on criticizing
Apple for leaving the past behind.”.
APRILE 2010 -THOUGHTS ON FLASH

42. ORA ABBIAMO
GLI STANDARD!

43. PERFORMANCE?
https://medium.com/@valeriocomo/web-assembly-710de9981c9
WEBASSEMBLY
EVENT LOOP
https://www.youtube.com/watch?v=8aGhZQkoFbQ
INTERPRETED + COMPILED JIT
+ CODE CACHING
+ SPECULATIVE OPTIMIZATIONS
https://developer.mozilla.org/it/docs/Web/JavaScript/EventLoop

44. https://github.com/felixrieseberg/windows95

45. JAVASCRIPT? O RLY?
ELM?TYPESCRIPT? FLOW? DART?

46. #2 IONIC

47. 😢
HYBRID APP?

48. FLUTTER? (💖)

49. IONIC È UN WEB UI FRAMEWORK
CHE EMULA I WIDGET NATIVI
UTILIZZANDO WEB COMPONENTS
https://ionicframework.com/docs/components

54. WEB COMPONENTS
CUSTOM ELEMENTS
progetta e utilizza nuovi tipi di elementi DOM.
SHADOW DOM
utilizza gli stili incapsulati e il markup all'interno di un componente web.
HTML IMPORT
include e riutilizza il documento HTML in un altro documento HTML.
HTML TEMPLATE
dichiara i frammenti di codice che non verranno utilizzati durante il
caricamento della pagina, ma che potranno essere successivamente
istanziati in fase di runtime.

55. https://www.webcomponents.org/introduction

56. CUSTOM PROPERTIES
sono variabili definite nei CSS che contengono valori specifici da
riutilizzare e ridefinire in tutto il documento.
Le variabili CSS consentono di archiviare un valore in un unico posto,
quindi di fare riferimento in più altri posti.
Consentono inoltre di modificare il CSS in modo dinamico a runtime
(che in precedenza richiedeva un preprocessore CSS).
Le variabili CSS rendono più semplice che mai l'override dei
componenti.
https://ionicframework.com/docs/theming/css-variables

57. CSS VARIABLES
https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
https://developer.mozilla.org/en-US/docs/Web/CSS/:host()
https://developer.mozilla.org/en-US/docs/Web/CSS/:host-context()

58. STENCILJS
• TypeScript support
• Asynchronous rendering pipeline
• A tiny virtual DOM layer
• One-way data binding
• JSX support
• Simple component lazy-loading

60. DECORATORS
• @Component() declares a new web component
• @Prop() declares an exposed property/attribute
• @State() declares an internal state of the component
• @Watch() declares a hook that runs when a property or state changes
• @Element() declares a reference to the host element
• @Method() declares an exposed public method
• @Event() declares a DOM event the component might emit
• @Listen() listens for DOM events
LIFECYCLE HOOKS
• componentWillLoad()
• componentDidLoad()
• componentWillUpdate()
• componentDidUpdate()
• componentDidUnload()

61. https://github.com/ionic-team/ionic/tree/master/core/src/components
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
https://ionicframework.com/docs/api/button#slots

62. STENCILJS È FRAMEWORK AGNOSTIC
↓
IONIC USA STENCILJS
↓
IONIC È FRAMEWORK AGNOSTIC

63. IONIC REACT BETA
21 FEBBRAIO 2019
https://blog.ionicframework.com/announcing-the-ionic-react-beta/

64. COMPATIBILITÀ?
+
=

65. Capacitor is a cross-platform app runtime
that makes it easy to build web apps that
run natively on iOS,Android,
Electron, and the web.
We call these apps "Native Progressive
Web Apps" and they represent the next
evolution beyond Hybrid apps.
CAPACITOR?

69. BUILD?
https://capacitor.ionicframework.com/docs/basics/building-your-app/

70. CAPACITOR SUPPORTA I
PLUGIN DI CORDOVA
https://ionicframework.com/docs/native/
(OLTRE AD AVERE UN SUO SISTEMA DI PLUGIN)
https://capacitor.ionicframework.com/docs/plugins/

71. WEBVIEW
IOS
WKWEBVIEW
SAFARI
WEBKIT
ANDROID
WEBVIEW
CHROME
V8
ELECTRON
CHROMIUM
CHROME
V8

73. Nel Mondo
In Italia

74. ANGULAR 7REACT
-JSX
-components
-internal state
-props for configuration
-react router
-state management with redux
-typescript
-directives
-modules
-decorators
-components
-services
-dependency injection
-pipes
-templates
-change detection
-zones
-AoT compilation
-Rxjs
-Templates
-XSS protection
-Angular HttpClient
-Angular Routing
-CSS encapsulation
-Jasmine(testing)
-Angular Forms
-Angular Material
-Angular Animations
-React router
-Redux
-Jest(testing)
-Material UI

76. “COMPONENT DIRECTIVE”

77. ATTRIBUTE DIRECTIVE
STRUCTURAL DIRECTIVE
*NgIf *NgSwitch *NgFor
<p [directive]=“‘test’”>test</p>
https://netbasal.com/understanding-angular-structural-directives-659acd0f67e
https://netbasal.com/attribute-directives-angular-forms-b40503643089

78. MODULES
I moduli di angular sono contenitori. Possono contenere componenti,
provider di servizi e altri file di codice il cui ambito è definito dal
modulo che lo contiene. Possono importare funzionalità esportate da
altri moduli ed esportare funzionalità selezionate per l'uso da parte di
altri moduli.

79. APP MODULE

84. RXJS
composing asynchronous and event-based programs by using
observable sequences
imperative programming => declarative programming
RxJS is a library for reactive programming using Observables
promise on steroids
https://rxjs-dev.firebaseapp.com/

87. PIPE

88. HTTP INTERCEPTOR

89. MONDI DIVERSI
STESSI PROBLEMI

90. WANNA GO DEEPER?
DOMANDE?

91. GRAZIE!
kernelfolla@gmail.com
https://www.facebook.com/kernelfolla
https://www.twitter.com/kernelfolla