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
58
Beyond ng new
cironunes
2
190
Animate your Angular apps
cironunes
0
400
Sweet Angular, good forms never felt so good
cironunes
0
61
Sweet Angular, good forms never felt so good
cironunes
0
280
Progressive Angular apps
cironunes
3
860
Angular: Um framework. Mobile & desktop.
cironunes
1
570

Other Decks in Technology

See All in Technology
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
750
ノーコードデータ分析ツールで体験する時系列データ分析超入門
negi111111
0
410
20241120_JAWS_東京_ランチタイムLT#17_AWS認定全冠の先へ
tsumita
2
250
The Rise of LLMOps
asei
7
1.4k
Lambda10周年！Lambdaは何をもたらしたか
smt7174
2
110
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
0
110
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
760
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
380
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
200
Evangelismo técnico: ¿qué, cómo y por qué?
trishagee
0
360
Shopifyアプリ開発における Shopifyの機能活用
sonatard
4
250

Featured

See All Featured
Embracing the Ebb and Flow
colly
84
4.5k
Being A Developer After 40
akosma
86
590k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Visualization
eitanlees
145
15k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Art, The Web, and Tiny UX
lynnandtonic
297
20k

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