Charla en Campus Madrid, dentro del programa Campus Givers donde explico las principales alternativas y herramientas disponibles para desarrollar aplicaciones web con Firebase, Polymer y React y lanzar cuanto antes tu proyecto al mercado.

1. @carlosazaustre carlosazaustre.es #CampusGivers

2. @carlosazaustre carlosazaustre.es #CampusGivers
Carlos Azaustre
CTO y Cofundador en Chefly
Desarrollador Web
Formador / Blogger / Youtuber
Papá

3. @carlosazaustre carlosazaustre.es #CampusGivers
Quiero desarrollar una aplicación

4. @carlosazaustre carlosazaustre.es #CampusGivers

5. @carlosazaustre carlosazaustre.es #CampusGivers

6. @carlosazaustre carlosazaustre.es #CampusGivers

7. @carlosazaustre carlosazaustre.es #CampusGivers

8. @carlosazaustre carlosazaustre.es #CampusGivers

9. @carlosazaustre carlosazaustre.es #CampusGivers
¿Qué herramientas/alternativas tengo?

10. @carlosazaustre carlosazaustre.es #CampusGivers

11. @carlosazaustre carlosazaustre.es #CampusGivers
Progressive
Web
Apps

12. @carlosazaustre carlosazaustre.es #CampusGivers
● HTTPS - letsencrypt.org
● Responsive Design - Mobile Friendly Test
● Offline - Service Workers
● Add to Home Screen (Installable) - Web App Manifest
● Push Notifications - Service Workers

13. @carlosazaustre carlosazaustre.es #CampusGivers
¿Cómo empiezo una PWA desde cero?

14. @carlosazaustre carlosazaustre.es #CampusGivers
1. React.js

15. @carlosazaustre carlosazaustre.es #CampusGivers

16. @carlosazaustre carlosazaustre.es #CampusGivers
2. Polymer

17. @carlosazaustre carlosazaustre.es #CampusGivers

18. @carlosazaustre carlosazaustre.es #CampusGivers

19. @carlosazaustre carlosazaustre.es #CampusGivers

20. @carlosazaustre carlosazaustre.es #CampusGivers

21. @carlosazaustre carlosazaustre.es #CampusGivers
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="[[rootPattern]]:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer id="drawer" slot="drawer">
<app-toolbar>Menu</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="view1">View One</a>
<a name="view2" href="view2">View Two</a>
<a name="view3" href="view3">View Three</a>
</iron-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header slot="header" condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
<div main-title>My App</div>
</app-toolbar>
</app-header>
</app-header-layout>
</app-drawer-layout>
</template>

22. @carlosazaustre carlosazaustre.es #CampusGivers
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="[[rootPattern]]:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer id="drawer" slot="drawer">
<app-toolbar>Menu</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="view1">View One</a>
<a name="view2" href="view2">View Two</a>
<a name="view3" href="view3">View Three</a>
</iron-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header slot="header" condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
<div main-title>My App</div>
</app-toolbar>
</app-header>
</app-header-layout>
</app-drawer-layout>
</template>

23. @carlosazaustre carlosazaustre.es #CampusGivers
Vale el Frontend lo tenemos cubierto,
pero…
¿Y el Backend?

24. @carlosazaustre carlosazaustre.es #CampusGivers

25. @carlosazaustre carlosazaustre.es #CampusGivers
Firebase
Hosting
Firebase
Database
Cloud Storage
for Firebase
Cloud Functions
for Firebase
Firebase
Auth

26. @carlosazaustre carlosazaustre.es #CampusGivers
Firebase
Hosting
Firebase
Database
Cloud Storage
for Firebase
Cloud Functions
for Firebase
Firebase
Auth
Machine
Learning APIs
Cloud Vision API
Cloud Speech API
Cloud Jobs API
Cloud Translation API
Cloud Natural Language
API
Cloud Video Intelligence
API
...

27. @carlosazaustre carlosazaustre.es #CampusGivers
¿Cómo es Firebase?

28. @carlosazaustre carlosazaustre.es #CampusGivers

29. @carlosazaustre carlosazaustre.es #CampusGivers

30. @carlosazaustre carlosazaustre.es #CampusGivers

31. @carlosazaustre carlosazaustre.es #CampusGivers
¿Qué se puede hacer con las
Cloud Functions?

32. @carlosazaustre carlosazaustre.es #CampusGivers

33. @carlosazaustre carlosazaustre.es #CampusGivers

34. @carlosazaustre carlosazaustre.es #CampusGivers

35. @carlosazaustre carlosazaustre.es #CampusGivers
Codelabs by Google
Aprende practicando
codelabs.developers.google.com

36. @carlosazaustre carlosazaustre.es #CampusGivers
https://codelabs.developers.google.com/codelabs/polymer-firebase-pwa/

37. @carlosazaustre carlosazaustre.es #CampusGivers
https://codelabs.developers.google.com/codelabs/firebase-cloud-functions/

38. @carlosazaustre carlosazaustre.es #CampusGivers
Curso Gratis
Aprende React.js y Firebase
desarrollando una aplicación
web como Instagram
carlosazaustre.es/guia-react