Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Single Page Apps FTW! (Revisited)

Ciro Nunes
December 14, 2013
Technology
5
670

Single Page Apps FTW! (Revisited)

A variedade de dispositivos e formas de acesso as aplicações web atuais, torna a tarefa de desenvolver e mantê-las um desafio. Por isso, ter uma arquitetura desacoplada, modular e testável é essencial. Que tal começar separando o client-side do server-side?

Nesta palestra, vamos falar sobre Single Page Apps, aplicações onde o MVC passa para o browser, que fica responsável pela experiência dos usuários (UX) e o servidor passa a ser responsável pela integridade dos dados, segurança da aplicação e servir uma simples e poderosa API REST.

https://www.youtube.com/watch?v=IiTz6EVjHnc

Ciro Nunes

December 14, 2013
Tweet

More Decks by Ciro Nunes

See All by Ciro Nunes
Rust Front-end with Yew
cironunes
0
40
Type safe CSS with Reason
cironunes
0
99
What I've learned building automated docs for Ansarada's design system
cironunes
0
59
Beyond ng new
cironunes
2
190
Animate your Angular apps
cironunes
0
400
Sweet Angular, good forms never felt so good
cironunes
0
62
Sweet Angular, good forms never felt so good
cironunes
0
280
Progressive Angular apps
cironunes
3
870
Angular: Um framework. Mobile & desktop.
cironunes
1
570

Other Decks in Technology

See All in Technology
Wvlet: A New Flow-Style Query Language For Functional Data Modeling and Interactive Data Analysis - Trino Summit 2024
xerial
1
120
Postman と API セキュリティ / Postman and API Security
yokawasa
0
200
サイボウズフロントエンドエキスパートチームについて / FrontendExpert Team
cybozuinsideout
PRO
5
38k
GitHub Copilot のテクニック集/GitHub Copilot Techniques
rayuron
36
13k
NW-JAWS #14 re:Invent 2024（予選落ち含）で 発表された推しアップデートについて
nagisa53
0
260
コンテナセキュリティのためのLandlock入門
nullpo_head
2
320
Snowflake女子会#3 Snowpipeの良さを5分で語るよ
lana2548
0
230
ずっと昔に Star をつけたはずの 思い出せない GitHub リポジトリを見つけたい！
rokuosan
0
150
開発生産性向上！ 育成を「改善」と捉えるエンジニア育成戦略
shoota
2
350
生成AIのガバナンスの全体像と現実解
fnifni
1
190
宇宙ベンチャーにおける最近の情シス取り組みについて
axelmizu
0
110
NilAway による静的解析で「10 億ドル」を節約する #kyotogo / Kyoto Go 56th
ytaka23
3
380

Featured

See All Featured
RailsConf 2023
tenderlove
29
940
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
Agile that works and the tools we love
rasmusluckow
328
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
170
The Cult of Friendly URLs
andyhume
78
6.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Making Projects Easy
brettharned
116
5.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
450

Transcript

  1. SINGLE PAGE APPS Ciro Nunes FOR THE WIN!

  2. CIRO NUNES Front End Developer cironunes @cironunesdev cironunes.github.io

  3. None
  4. None
  5. None

  6. http://www.meetup.com/AngularJS-Sao-Paulo/

  7. SINGLE PAGE APPS Ciro Nunes FOR THE WIN!

  8. None
  9. None
  10. None
  11. None
  12. None

  13. SINGLE PAGE APPS UX de aplicações nativas no browser!

  14. SINGLE PAGE APPS front end & back end zen

  15. pro tips como começar? arquitetura

  16. arquitetura

  17. server client NORMAL WEBSITES

  18. server client <html><body> <h1>data2</h1> <p>data2</p> </body></html> GET / NORMAL WEBSITES

  19. server client <html><body> <h1>data2</h1> <p>data2</p> </body></html> GET / 200 OK

    display the returned HTML NORMAL WEBSITES

  20. necessidade de integração front/back workflow lento =(

  21. server client SINGLE PAGE APPS

  22. server client JSON: { data1, data2 } GET / SINGLE

    PAGE APPS

  23. server client JSON: { data1, data2 } <h1>data1</h1> <p>data2</p> GET

    / 200 OK SINGLE PAGE APPS

  24. server client JSON: { data1, data2 } <h1>data1</h1> <p>data2</p> GET

    / 200 OK SINGLE PAGE APPS

  25. client e server totalmente desacoplados

  26. SERVER DB , RESTful API

  27. CLIENT routing, data-binding, components, i/o

  28. possibilita trabalhar em paralelo fácil de escalar fácil de testar

    =)

  29. SINGLE PAGE APPS front end & back end zen

  30. como começar?

  31. SERVER DB , RESTful API

  32. Method URL Action GET /items Retorna todos os items GET

    /item/:id Retorna o item com o id especificado POST /items Adiciona um novo item PUT /item/:id Atualiza o item com o id especificado DELETE /item/:id Deleta o item com o id especificado

  33. Method URL Action GET /items Retorna todos os items GET

    /item/:id Retorna o item com o id especificado POST /items Adiciona um novo item PUT /item/:id Atualiza o item com o id especificado DELETE /item/:id Deleta o item com o id especificado

  34. Method URL Action GET /items Retorna todos os items GET

    /item/:id Retorna o item com o id especificado POST /items Adiciona um novo item PUT /item/:id Atualiza o item com o id especificado DELETE /item/:id Deleta o item com o id especificado

  35. Method URL Action GET /items Retorna todos os items GET

    /item/:id Retorna o item com o id especificado POST /items Adiciona um novo item PUT /item/:id Atualiza o item com o id especificado DELETE /item/:id Deleta o item com o id especificado

  36. Method URL Action GET /items Retorna todos os items GET

    /item/:id Retorna o item com o id especificado POST /items Adiciona um novo item PUT /item/:id Atualiza o item com o id especificado DELETE /item/:id Deleta o item com o id especificado

  37. Method URL Action GET /items Retorna todos os items GET

    /item/:id Retorna o item com o id especificado POST /items Adiciona um novo item PUT /item/:id Atualiza o item com o id especificado DELETE /item/:id Deleta o item com o id especificado

  38. http://expressjs.com/

  39. http://mcavage.me/node-restify/

  40. https://github.com/intridea/grape

  41. http://flask-restful.readthedocs.org/en/latest/

  42. CLIENT routing, data-binding, components, i/o

  43. ROUTING

  44. ROUTING History API

  45. DATA-BINDING

  46. DATA-BINDING <h1 id="greeting">Hello </h1> <input type="text" id="userEntry"> $('#userEntry').on('keyup', function() {


    $('#greeting').text('Hello ' + $(this).val);
 });

  47. COMPONENTS

  48. COMPONENTS web components?

  49. I/O $.ajax({ type: 'get', url: 'http://localhost:8000/items', success: function(data) { $('#items').html(data);

    } });

  50. que tal um pouco de estrutura?

  51. routing ngRoute data-binding components directives i/o $http mvc

  52. None

  53. DEMO

  54. pro tips

  55. TESTES mais confiança e documentação

  56. None

  57. http://visionmedia.github.io/mocha/

  58. http://pivotal.github.io/jasmine/

  59. http://github.com/angular/protractor

  60. CORS cross-origin resource sharing

  61. htttp://w3.org/TR/cors/

  62. 8+ suporte

  63. server.use(restify.CORS({ origins: ['*'] })); server.use(restify.fullResponse()); RESTIFY + CORS

  64. http://www.html5rocks.com/en/tutorials/cors/

  65. SEO seja encontrado :)

  66. https://developers.google.com/webmasters/ajax-crawling/

  67. htttp://prerender.io/

  68. WORKFLOW

  69. None

  70. http://karma-runner.github.io/

  71. use e contribua com os melhores projetos!

  72. None

  73. OBRIGADO! cironunes @cironunesdev cironunes.github.io