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
46
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
66
Beyond ng new
Avatar for Ciro Nunes cironunes
2
200
Animate your Angular apps
Avatar for Ciro Nunes cironunes
0
410
Sweet Angular, good forms never felt so good
Avatar for Ciro Nunes cironunes
0
64
Sweet Angular, good forms never felt so good
Avatar for Ciro Nunes cironunes
0
290
Progressive Angular apps
Avatar for Ciro Nunes cironunes
3
890
Angular: Um framework. Mobile & desktop.
Avatar for Ciro Nunes cironunes
1
590

Other Decks in Programming

See All in Programming
Elixir で IoT 開発、 Nerves なら簡単にできる！？
Avatar for pojiro pojiro
1
150
Rails産でないDBを Railsに引っ越すHACK - Omotesando.rb #110
Avatar for lni_T lnit
1
170
Cline指示通りに動かない？ AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
Avatar for 葦沢かもめ kamomeashizawa
1
550
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
41
27k
業務自動化をJavaとSeleniumとAWS Lambdaで実現した方法
Avatar for GreenFlagProject greenflagproject
1
120
Development of an App for Intuitive AI Learning - Blockly Summit 2025
Avatar for Teba_eleven teba_eleven
0
120
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
Avatar for ANDPAD inc andpad
0
250
SODA - FACT BOOK
Avatar for SODA inc. sodainc
1
1.1k
Julia という言語について （FP in Julia « SIDE: F »） for 関数型まつり2025
Avatar for GOTOH Shunsuke antimon2
3
960
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
Avatar for Koichi NAKAGAWA knakagawa
1
120
[初登壇＠jAZUG]アプリ開発者が気になるGoogleCloud/Azure＋wasm/wasi
Avatar for asaringo asaringo
0
130
「ElixirでIoT!!」のこれまでとこれから
Avatar for takasehideki takasehideki
0
370

Featured

See All Featured
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
31
1k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
7
490
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
277
23k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
39
1.9k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
81
9k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.7k
Designing for Performance
Avatar for Lara Hogan lara
609
69k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
22
3.5k
Code Review Best Practice
Avatar for Trisha Gee trishagee
68
18k

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