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

Single Page Apps FTW!

Avatar for Ciro Nunes Ciro Nunes
November 30, 2013
Programming
2
160

Single Page Apps FTW!

Avatar for Ciro Nunes

Ciro Nunes

November 30, 2013
Tweet

More Decks by Ciro Nunes

See All by Ciro Nunes
Rust Front-end with Yew
Avatar for Ciro Nunes cironunes
0
50
Type safe CSS with Reason
Avatar for Ciro Nunes cironunes
0
110
What I've learned building automated docs for Ansarada's design system
Avatar for Ciro Nunes cironunes
0
70
Beyond ng new
Avatar for Ciro Nunes cironunes
2
200
Animate your Angular apps
Avatar for Ciro Nunes cironunes
0
420
Sweet Angular, good forms never felt so good
Avatar for Ciro Nunes cironunes
0
67
Sweet Angular, good forms never felt so good
Avatar for Ciro Nunes cironunes
0
290
Progressive Angular apps
Avatar for Ciro Nunes cironunes
3
900
Angular: Um framework. Mobile & desktop.
Avatar for Ciro Nunes cironunes
1
590

Other Decks in Programming

See All in Programming
Devoxx BE - Local Development in the AI Era
Avatar for Kevin Dubois kdubois
0
130
『毎日の移動』を支えるGoバックエンド内製開発
Avatar for yutautsugi yutautsugi
2
270
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
Avatar for Masayuki Izumi izumin5210
0
3.4k
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
Avatar for aokirishima aokswork3
0
250
フロントエンド開発のためのブラウザ組み込みAI入門
Avatar for Masashi Hirano masashi
6
3.3k
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
Avatar for Takashi uhucream
0
200
What's new in Spring Modulith?
Avatar for Oliver Drotbohm olivergierke
1
160
Introduce Hono CLI
Avatar for Yusuke Wada yusukebe
6
3k
品質ワークショップをやってみた
Avatar for Nealle nealle
0
580
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
Avatar for Holly Cummins hollycummins
0
240
なぜGoのジェネリクスはこの形なのか？ - Featherweight Goが明かす設計の核心
Avatar for QualiArts qualiarts
0
200
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
Avatar for 小島舞子 / Maiko Kojima maikokojima
0
600

Featured

See All Featured
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Visualization
Avatar for Eitan Lees eitanlees
149
16k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
30
2.9k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
31
2.7k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.6k
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
59
9.6k
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k

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 nativa no browser!

  14. pro tips como começar arquitetura

  15. arquitetura

  16. client totalmente desacoplado do server

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

    display the returned HTML NORMAL WEBSITES

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

    /items 200 OK SINGLE PAGE APPS

  19. SERVER RESTful API

  20. CLIENT routing, data-binding, components, MVC

  21. server fornece os recursos, client manipula a interface

  22. como começar

  23. SERVER RESTful API

  24. 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

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

  26. DEMO

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

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

  29. CLIENT routing, data-binding, components, MVC

  30. http://angularjs.org/

  31. DEMO

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

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

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

  35. pro tips

  36. CORS cross-origin resource sharing

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

  38. 8+ suporte

  39. DEMO

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

  41. SEO seja encontrado :)

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

  43. htttp://prerender.io/

  44. WORKFLOW teste em vários dispositivos no ctrl+s

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

  46. http://yeoman.io/

  47. DEMO

  48. use e contribua com os melhores projetos!

  49. None

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