[Juarez Filho] Let Firebase help you to build better Front-end apps

Presentation from GDG DevFest Ukraine 2017 - the biggest community-driven Google tech conference in the CEE.

Learn more at: https://devfest.gdg.org.ua

Transcript

1. Juarez Filho Google Developer Expert to build better Web Apps Let Firebase help you
2. #dfua 2 years ago... Firebase Adventures! Realtime platform and more for your apps − Juarez Filho at #dfua https://goo.gl/S5f9Vg
3. #dfua What is Front-end Web Development? developers.google.com/web
4. #dfua The practice of producing HTML, CSS and JavaScript for a Website or Web Application so that a user can see & interact with them directly. What is Front-end Web Development?
5. #dfua What a Front-end Web Developer should be able to do?
6. #dfua What a Front-end Web Developer should be able to do? HTML/CSS JavaScript CSS and JavaScript Libraries/Frameworks 1 2 3
7. #dfua What a Front-end Web Developer should be able to do? CSS Preprocessing Version Control/Git Responsive Web Design 4 5 6
8. #dfua What a Front-end Web Developer should be able to do? Testing/Debugging Browser Developer Tools Building & Automation Tools 7 8 9
9. #dfua What a Front-end Web Developer should be able to do? Web Performance #perfmatters Command Line ... 10 11 12
10. #dfua …and much more! What a Front-end Web Developer should be able to do?
11. #dfua
12. #dfua udacity.com/google-scholarships
13. #dfua
14. #dfua g.co/dev/mobile-web-cert
15. “ First do it then do it right then do it better − Addy Osmani “
16. #dfua
17. #dfua
18. #dfua
19. #dfua firebase.google.com/docs/web
20. +
21. #dfua Web App + Firebase SDK Firebase Database Storage AngularFire + AngularFire
22. #dfua Web App + Firebase SDK Firebase Database Storage + AngularFire Cloud functions
23. #dfua goo.gl/HTYE93
24. #dfua
25. “ AngularFire exposes Firebase capabilities with an Angular-style API − Stephen Fluin “
26. #dfua What is AngularFire? github.com/angular/angularfire2
27. #dfua What is AngularFire? Observable based Realtime bindings Authentication 1 2 3
28. #dfua What is AngularFire? Offline Data ngrx friendly Cloud Storage is coming 4 5 6 github.com/angular/angularfire2/pull/963
29. #dfua
30. #dfua Let’s create a simple Web App Using AngularFire awesomeness!
31. #dfua cli.angular.io
32. #dfua
33. #dfua
34. #dfua
35. #dfua
36. #dfua localhost:4200
37. #dfua
38. #dfua Let’s create a simple Web App Basic steps using Angular CLI. Nothing fancy going on until now, right?
39. #dfua
40. #dfua The latest & greatest!
41. #dfua Let’s create a simple Web App Before keep with coding we need to do some configuration at the Firebase Console
42. #dfua
43. #dfua console.firebase.google.com
44. #dfua
45. #dfua
46. #dfua /src/environments/environment.ts
47. #dfua /src/app/app.module.ts
48. #dfua /src/app/app.module.ts
49. #dfua /src/app/app.module.ts
50. #dfua Let’s create a simple Web App Adding authentication via Google ⚡
51. #dfua
52. #dfua
53. #dfua
54. #dfua
55. #dfua
56. #dfua /src/app/app.module.ts
57. #dfua /src/app/app.component.ts
58. #dfua /src/app/app.component.html
59. #dfua
60. #dfua https://goo.gl/Nz4HrP ✔
61. #dfua Let’s create a simple Web App What about easily store and sync your app data at global scale?
62. #dfua
63. #dfua
64. #dfua
65. #dfua
66. #dfua
67. #dfua
68. #dfua /src/app/app.module.ts
69. #dfua /src/app/app.component.ts
70. #dfua /src/app/app.component.ts
71. #dfua /src/app/app.component.ts
72. #dfua /src/app/app.component.html
73. #dfua /src/app/app.module.ts Easy Peasy Lemon Squeezy!
74. “ I’m in love with Firestore And even more now that I discovered we can use it already with AngularFire − William Grasel “
75. #dfua
76. #dfua https://goo.gl/F1EvtS ✔
77. #dfua Let’s create a simple Web App Are we saying goodbye to our lovely Realtime Database feature?
78. #dfua https://goo.gl/G8bu3f ✔
79. #dfua Let’s create a simple Web App I’m sold! I want to make it public to the world. Firebase Hosting is your best friend!
80. #dfua
81. #dfua
82. #dfua
83. #dfua
84. #dfua
85. #dfua The latest & greatest!
86. #dfua
87. #dfua /src/environments/environment.prod.ts
88. #dfua
89. #dfua
90. #dfua
91. #dfua
92. #dfua ✔
93. #dfua Let’s create a simple Web App Develop a backend without servers ☁
94. #dfua
95. #dfua
96. #dfua youtu.be/Fnwj9VjE_BY
97. #dfua ✔ ✔ firebase.google.com/docs/hosting/functions
98. #dfua
99. Want to help shape Firebase? Join us for one of our future user studies! Firebase Alpha Program firebase.google.com/alpha
100. Step-by-steps tutorial teaching you how to use Firebase features Firebase Codelabs g.co/codelabs
101. firebase.google.com/dev-summit-17
102. “ If at first you don’t succeed; call it version 1.0 “
103. #dfua
104. Thank you! Велике спасибі You have questions? You can reach me via Twitter: @juarezpaf Juarez Filho Google Developer Expert