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
36
Type safe CSS with Reason
cironunes
0
87
What I've learned building automated docs for Ansarada's design system
cironunes
0
54
Beyond ng new
cironunes
2
190
Animate your Angular apps
cironunes
0
380
Sweet Angular, good forms never felt so good
cironunes
0
51
Sweet Angular, good forms never felt so good
cironunes
0
270
Progressive Angular apps
cironunes
3
860
Angular: Um framework. Mobile & desktop.
cironunes
1
560

Other Decks in Technology

See All in Technology
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
330
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
150
Four keys改善の取り組み事例紹介
sansantech
PRO
3
230
[PlatformCon 24] Platform Orchestrators: The Missing Middle of Internal Developer Platforms?
danielbryantuk
1
180
株式会社EventHub・エンジニア採用資料
eventhub
0
1.9k
LLM とプロンプトエンジニアリング／チューターをビルドする / LLM and Prompt Engineering and Building Tutors
ks91
PRO
0
220
PHP"オレ"カンファレンスの告知
ysknsid25
0
360
ChatGPT for IT Service Management (IT Pro)
dahatake
2
140
Oracle Cloud Infrastructure：2024年4月度サービス・アップデート
oracle4engineer
PRO
1
110
オブザーバビリティの Primary Signals
onk
PRO
0
550
日本におけるデータエンジニアリングのこれまでとこれから
foursue
10
2.3k
入社後初めてのタスクでk8sアップグレードした話.pdf
kkato1
1
380

Featured

See All Featured
Atom: Resistance is Futile
akmur
258
25k
The Invisible Customer
myddelton
114
12k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Making Projects Easy
brettharned
108
5.5k
Embracing the Ebb and Flow
colly
79
4.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.4k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
220
21k
Designing with Data
zakiwarfel
95
4.8k
Visualization
eitanlees
135
14k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2.1k

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