Como aprender a desenvolver SPA sem saber Back-End #258
Replies: 24 comments
-
|
@vitorbritto @fdaciuk @lfeh @Mendrone @willianjusten @woliveiras @diessica |
Beta Was this translation helpful? Give feedback.
-
|
Você quer dizer alguma forma de "simular" APIs pra você ir testando seu front-end? Se esse for o caso existem alguns projetos/serviços que te permitem fazer isso sem escrever quase nada de código:
Eu imagino que o primeiro item da lista (JSON Server) seja perfeito pro seu objetivo. Ele te permite criar um "banco de dados" em JSON puro, e gera toda a API REST para acessar e modificar esses dados automaticamente. Você só precisa rodar ele em cima desse arquivo JSON que você criou e ele já gera tudo e sobe um servidorzinho local pra você consumir os dados. Caso você queira criar algo mais organizado, pra depois ser aproveitado pela equipe back-end, você pode usar algum dos outros serviços da lista ali em cima. Eles permitem criar APIs usando as interfaces amigáveis dos sistemas deles, e essas APIs depois podem ser exportadas para determinadas linguagens. Espero ter ajudado. 😀 |
Beta Was this translation helpful? Give feedback.
-
|
O kazzkiq deu boas dicas! Para acrescentar, esses dias eu tava brincando com Elixir e descobri o http://httpbin.org/. Tu pode dar uma lida nele e fazer requisições e brincar com as respostas. Talvez possa te ajudar em algo! |
Beta Was this translation helpful? Give feedback.
-
|
@simaodeveloper, o @kazzkiq deu ótimas dicas! Tem essa aqui também: http://pokeapi.co/ Já aproveita a onda do Pokemon e cria sua própria Pokedex. 🙌 Treinando, eu aprendi a montar um servidorzinho com Express e subir um JSON qualquer pra utilizar no Front. Com Node não é difícil, mas não precisa focar seus esforços em montar algo perfeito. Saiu esse exemplo: https://github.com/woliveiras/angular-studies/tree/master/angular-search O código está um pouco feio, mas esse ano comecei a aprender a escrever algo mais bonito! 😬 E tem as APIs conhecidas, como a do Google Maps: https://github.com/woliveiras/googlemapsapp Também tem um esquema legal com as Planilhas do Google: http://jotateles.com.br/javascript/2015/10/25/transforme-suas-planilhas-do-google-em-api-com-sheetsu.html |
Beta Was this translation helpful? Give feedback.
-
|
Esses tempos passei por uma lista cheinha de APIs legais e não salvei :'( O mais próximo que encontrei agora foi essa lista deve ter alguma divertida pra ti brincar 💃 |
Beta Was this translation helpful? Give feedback.
-
|
Galera muito obrigado, eu cheguei a fazer um weather App com js puro, criei um pattern facade e depois uma estrutura para organizar o app, muito legal. Mas aí eu fui meio burro, eu não preciso mandar a informação pro banco de verdade pra aprender, eu tenho que simular o que vai acontecer no front, não é isso? |
Beta Was this translation helpful? Give feedback.
-
|
Dicas ótimas da galera! :D @simaodeveloper, se você quer testar somente a parte de frontend, é isso mesmo: a parte de backend pode ser toda "mockada". No caso, se quiser salvar dados temporariamente, você pode utilizar uma variável no backend (um array por exemplo), e ir fazendo Dessa forma, os dados ficarão em memória até que o servidor seja reiniciado, e você consegue trabalhar com um comportamento parecido com uma aplicação real. Nem precisa de DB =) |
Beta Was this translation helpful? Give feedback.
-
|
É possivel fazer um cms só com Angular e Json?? se conseguir alimentar esse json, ja era , o problema só é a autenticação no admin |
Beta Was this translation helpful? Give feedback.
-
|
@rubenmarcus se estiver pensando em um CMS "usável", a resposta é não. O motivo é que você esbarra em, ao menos, dois problemas. Um deles você já citou: segurança. O segundo é persistência. Você até consegue persistir dados no frontend, mas só localmente (com |
Beta Was this translation helpful? Give feedback.
-
|
Entendi, eu tb nao sou especialista em back-end, mas pensei em algo em que ficaria um hash ou algo encriptado num arquivo e o js leria isso, e descriptava... e o arquivo ficaria 503... o Json não sei se por js ele consegue ir incrementando tb.. pq na teoria, Wordpress etc etc, se você acessa o config.php do cara daria na mesma, você tem acesso ao banco e ai ja era |
Beta Was this translation helpful? Give feedback.
-
|
Mas um cms gerador de html estatico local tipo, vc gera no seu servidor local e publica, é possivel sem back-end ou não? |
Beta Was this translation helpful? Give feedback.
-
|
ah uma outra pergunta: SPA e SEOS ... muita gente que fala que é inviavel.. Mas li um doc do google que diz que ele entende sim JS. |
Beta Was this translation helpful? Give feedback.
-
|
Pelo o que eu entendi, você procura APIs abertas para brincar em projetos, certo? Existem algumas listas bacanas, geralmente procurando por "open APIs" ou "public APIs" você acha várias coisas bacanas. Recomendações
A outra opção é mockar uma JSON API. Existem várias ferramentas para isso. |
Beta Was this translation helpful? Give feedback.
-
|
Isso mesmo @diessica lembra que a gente conversou no facebook sobre isso? Estou correndo atrás agora. |
Beta Was this translation helpful? Give feedback.
-
|
Depois de tantos serviços e links indicados... eu uso o Firebase pra essas coisas, a ultima versão está com vários recursos, vale a pena dar uma conferida. |
Beta Was this translation helpful? Give feedback.
-
JavaScript rodando no browser é diferente de JavaScript rodando no backend (Node). O browser não tem acesso ao filesystem do sistema, então você não consegue escrever em arquivos no frontend. De qualquer forma o arquivo precisaria estar hospedado em algum lugar, e com acesso público liberado para acesso via browser. Quem vai dar essa permissão, é a ferramenta utilizada no servidor (backend).
O WordPress é PHP, que roda do lado do servidor, não do browser. Para ter acesso ao
Para gerar os arquivos estáticos, você precisa executar código de backend =)
Sim, o Google consegue executar JS de frontend, mas é um processo muito custoso, e não dá garantias de que o conteúdo que ele vai ter é exatamente o mesmo que você queria exibir (podem acontecer erros na execução do script). Por isso, o Google deixou de fazer isso. Se quiser que o seu conteúdo apareça em buscadores, o ideal é que você disponibilize esse conteúdo de forma estática, fazendo um pre-render no servidor. |
Beta Was this translation helpful? Give feedback.
-
|
@diessica MUITO obrigado, não achava mais o Public APIs 👯 |
Beta Was this translation helpful? Give feedback.
-
|
@fdaciuk ou seja dinamico sem back-end esquece? SPAS então só se for pra não ser indexado pelos buscadores? |
Beta Was this translation helpful? Give feedback.
-
|
@rubenmarcus resumidamente é isso =) |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
@diessica @fdaciuk e @kazzkiq já mataram a pau a pergunta, nem tem o que complementar ai. Valeu galera ❤️ |
Beta Was this translation helpful? Give feedback.
-
|
@simaodeveloper segue alguns pontos importantes para o seu crescimento profissional como Front-End Engineer. Leve em consideração o estudo sobre:
Você pode praticar em paralelo, mas recomendo fortemente o estudo desses tópicos. Bons estudos! =] |
Beta Was this translation helpful? Give feedback.
-
|
Obrigado @vitorbritto, eu lembro de quando falamos pelo whats e me deu várias dicas na época, vocês são pessoas que me inspiram e espero pode inspirar outras pessoas também :D. Uma pergunta, consigo localizar esses tópicos na internet com esses termos mesmo? ou mehor procurar em inglês? pra mim tanto faz vou procurar de qualquer jeito kkk mas vai que vocês tem alguma dica. |
Beta Was this translation helpful? Give feedback.
-
|
@simaodeveloper acredito que Aplicações Conectadas não seja um termo muito fácil para encontrar. Pesquise por WebSockets e Real-Time. Apenas para não passar em branco, WebSockets é uma extensão do protocolo HTTP, que possibilita a entrega de informações, através de um canal de comunicação, seja por parte do server-side ou client-side. Esse é o conceito-base de uma Aplicação Conectada. Para extender, temos as Aplicações Convencionais. São essas aplicações que fazemos com maior frequência, seguindo o seguinte processo:
Entenda que não é um processo custoso, mas não é trivial também. Agora imagina esse processo, sendo executado inúmeras vezes ao mesmo tempo, e por centenas / milhares de users? Por isso temos tecnologias que nos permitem trabalhar de forma conectada (Websockets FTW!) e com concorrência (um programa consegue lidar com diversas threads de execução ao mesmo tempo). Basicamente, é isso. Acho que alonguei a questão (LOL!), mas é quase impossível falar sobre API sem citar esses caras/termos. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Galera estou com uma enorme dificuldade de me desenvolver como Front-End Engineer, pois não tenho/conheço nenhuma API que eu possa recuperar informações, assim como enviar para salvar em banco, como vocês fazem para estudar sobre single-page application, existe alguma API disponível ou vocês mesmos sabem montam um server com Back-End e com isso se desenvolvem em ferramentas como React, Angular, Backbone..., atualmente estou estudando PHP/MYSQL para desenvolver uma API e começar a entender esse tipo de projeto, desde ja agradeço a atenção
Beta Was this translation helpful? Give feedback.
All reactions