PoCs rápidas com nextJS, now e faunaDB

Transcript

1. POCs RÁPIDAS com nextjs, now e faunaDB
2. MILSON JÚNIOR Software Developer na idwall @mjnr20
3. Vagas https://apply.workable.com/idwall Twitter @idwall_co
4. Contextualizando Roadmap das tecnologias de desenvolvimento frontend Curva de aprendizado e mercado de trabalho ⚙ A importância de aprender fazendo SHOW ME THE CODE!
5. Roadmap das tecnologias de desenvolvimento frontend https://roadmap.sh
6. Roadmap das tecnologias de desenvolvimento frontend
7. Roadmap das tecnologias de desenvolvimento frontend
8. Roadmap das tecnologias de desenvolvimento frontend
9. eu só queria fazer um site!
10. Roadmap das tecnologias de desenvolvimento frontend Curva de aprendizado e mercado de trabalho ⚙ A importância de aprender fazendo SHOW ME THE CODE!
11. Curva de aprendizado e mercado de trabalho
12. Curva de aprendizado e mercado de trabalho
13. Curva de aprendizado e mercado de trabalho
14. Curva de aprendizado e mercado de trabalho
15. Curva de aprendizado e mercado de trabalho https://hackernoon.com/the-backendification-of-frontend-development-62f218a773d4 MIKE TAYLOR
16. Curva de aprendizado e mercado de trabalho https://css-tricks.com/the-great-divide/ - Chris Coyier
17. Curva de aprendizado e mercado de trabalho https://css-tricks.com/the-great-divide/ - CHRIS COYIER
18. Curva de aprendizado e mercado de trabalho https://www.katabolt.com/2016/03/15/export-generalist-or-specialist-which-are-you/
19. Roadmap das tecnologias de desenvolvimento frontend Curva de aprendizado e mercado de trabalho ⚙ A importância de aprender fazendo SHOW ME THE CODE!
20. ⚙ A importância de aprender fazendo POC - Proof Of Concept “... The goal of a POC is to ensure that a specific technology can bring value to a given business problem. As a logical first step, POC teams should look to build something small, usually, over a period of a few weeks, that can be demonstrated to a business user.” https://www.quora.com/What-is-POC-How-does-the-work-go-for-POC-in-real-time
21. ⚙ A importância de aprender fazendo SAAS - Software as a Service “SAAS, or "Software as a Service" in general refers to a software application which is hosted by a provider on their own servers, but accessible to users across the Internet. In other words when using a SAAS application the data and functionality that create the user experience are being delivered from the provider's servers and not installed locally in the user's own computer or intranet.” https://www.quora.com/What-is-SaaS
22. ⚙ A importância de aprender fazendo GET SHIT DONE “Keep trying and never stopping in the face of consistent failures...” https://www.quora.com/What-is-Get-shit-done-for-entrepreneurs
23. ⚙ A importância de aprender fazendo Caso de estudo WebApp que coleta nome e telefone dos usuários, envia-os para o backend, e este por sua vez persiste os dados no banco. Ferramentas para desenvolvimento - Framework/Lib para desenvolvimento frontend - Serviço de cloud para hospedagem - Banco de dados
24. Roadmap das tecnologias de desenvolvimento frontend Curva de aprendizado e mercado de trabalho ⚙ A importância de aprender fazendo SHOW ME THE CODE!
25. https://github.com/zeit/next.js/ - Framework open source para React - Redução de código boilerplate - Abstração de aspectos geralmente complexos, como webpack, roteamento e build. - Ambiente de desenvolvimento friendly
26. https://github.com/zeit/next.js/ mkdir poc-meetup-htmlsp cd poc-meetup-htmlsp
27. https://github.com/zeit/next.js/ npm install react react-dom next
28. https://github.com/zeit/next.js/ "scripts": { "dev": "next", "build": "next build", "start": "next start" }
29. https://github.com/zeit/next.js/ <div className="lead-form"> <h1 className="title">Adicionar contato</h1> <form onSubmit={onSaveContact} className="form-wrapper" ref={$form}> <Field name="lead_name" inputProps={{ placeholder: "Nome", autoFocus: true, maxLength: 40, type: "text" }} /> <Field name="lead_phone" inputProps={{ placeholder: "Telefone", maxLength: 13, type: "tel" }} /> {isLoading ? ( <Loader /> ) : ( <input type="submit" value="Salvar" className="btn" /> )} </form> </div>
30. https://github.com/zeit/next.js/ import LeadForm from "../components/LeadForm"; export default function Home() { return ( <div className="home-page"> <LeadForm /> </div> ); }
31. https://github.com/zeit/next.js/ export default (req, res) => { res.send("Hello World!"); };
32. https://github.com/zeit/next.js/
34. fetch("/api/saveContact", { method: "POST", body: JSON.stringify(contactData) }) .then(e => setIsLoading(false)) .catch(err => { console.log(err); });
35. export default (req, res) => { if (!(req.method === "POST")) { return res.status(405).send(`method ${req.method} not allowed!`); } const contactData = req.body; const { error } = contactDataSchema.validate(contactData); if (error) { return res.status(400).send(error.details); } res.send("ok!"); };
36. - Banco de dados serverless - Infraestrutura abstraída através - de um SaaS. - Abstração de aspectos geralmente complexos, indexação, segurança, modelagem de dados, etc. - Ambiente de desenvolvimento friendly
40. npm install faunadb --save
42. const faunadb = require("faunadb"); const q = faunadb.query; const db = new faunadb.Client({ secret: process.env.FAUNA_DB, keepAlive: true }); const saveContactOnDB = data => db.query( q.Create(q.Collection("contacts"), { data: data }) );
43. saveContactOnDB(JSON.parse(contactData)) .then(({ ref }) => res.json({ id: ref.id })) .catch(err => { console.log("error on save db contact", err); res.status(400).json({ err: true }); });
46. Deployando a webapp.
47. - Deploy de sites estáticos e cloud functions em poucos minutos. - Abstração de aspectos geralmente complexos, CI/CD, deploy,logs, abstraídos através de um SaaS e uma CLI. - Ambiente de desenvolvimento friendly
49. npm install -g now
50. now login
54. Webapp: http://bit.ly/htmlsp-poc Repo: http://bit.ly/htmlsp-code
57. Obrigado! @mjnr20 @idwall_co