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

[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

3a6de6bc902de7f75c0e753b3202ed52?s=128

Google Developers Group Lviv

October 14, 2017
Tweet

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