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

Single Page Apps FTW!

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Ciro Nunes Ciro Nunes
November 30, 2013
Programming
170
2

Single Page Apps FTW!

Avatar for Ciro Nunes

Ciro Nunes

November 30, 2013

More Decks by Ciro Nunes

See All by Ciro Nunes
Rust Front-end with Yew
Avatar for Ciro Nunes cironunes
0
89
Type safe CSS with Reason
Avatar for Ciro Nunes cironunes
0
150
What I've learned building automated docs for Ansarada's design system
Avatar for Ciro Nunes cironunes
0
98
Beyond ng new
Avatar for Ciro Nunes cironunes
2
240
Animate your Angular apps
Avatar for Ciro Nunes cironunes
0
460
Sweet Angular, good forms never felt so good
Avatar for Ciro Nunes cironunes
0
100
Sweet Angular, good forms never felt so good
Avatar for Ciro Nunes cironunes
0
320
Progressive Angular apps
Avatar for Ciro Nunes cironunes
3
940
Angular: Um framework. Mobile & desktop.
Avatar for Ciro Nunes cironunes
1
610

Other Decks in Programming

See All in Programming
気づいたらRubyで100作品 ー クリエイティブコーディングが生活の一部になるまで / 100 Ruby Sketches Later: How Creative Coding Became Part of My Life
Avatar for chobishiba chobishiba
3
610
才能？センス？知らん、 続けたもん勝ちだ。-- 結婚・出産・癌を越えてなお、私がプロダクトを創り続ける理由
Avatar for 16bit_idol 16bitidol
1
460
そのテスト、説明できますか？~LWテスト戦略FW~のご紹介
Avatar for Kei Nakahara nakahara
0
170
The NotImplementedError Problem in Ruby
Avatar for Koichi ITO koic
1
950
PHPで使える日時の表現と、その知り方 #frontend_phpcon_do
Avatar for hideki kinjyo o0h
PRO
0
270
Semantic Version 単位で戦略を柔軟に変えて、パッケージアップデートを自動化する
Avatar for daitasu daitasu
1
310
「AIで開発し、AIを届ける」をEvalでつなぐ 〜AIネイティブに始めるプロダクト開発の実践〜 / Connecting "Develop with AI, deliver AI" with Eval
Avatar for r-kagaya rkaga
4
5.4k
The ROI of Quarkus for Spring Boot Applications
Avatar for Holly Cummins hollycummins
0
140
Vite+ Unified Toolchain for the Web
Avatar for Naoki Haba naokihaba
0
360
軽量Java基盤の設計 DIコンテナに頼らない、長期保守と1秒起動の実現 JJUG CCC 2026 Spring
Avatar for Masaaki Takahashi macha64
0
590
はてなアカウント基盤 State of the Union
Avatar for cockscomb cockscomb
1
890
鹿野さんに聞く！『TypeScriptコードレシピ集』で磨く実践力
Avatar for tonkotsuboy_com tonkotsuboy_com
4
840

Featured

See All Featured
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.7k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.9k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
400
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.9k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
990
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
490
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
710
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
440
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.8k
Visualization
Avatar for Eitan Lees eitanlees
152
17k

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