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

Transcript

1. SINGLE PAGE APPS
   Ciro Nunes
   FOR THE WIN!
   

   View Slide

2. CIRO NUNES
   Front End Developer
   cironunes
   @cironunesdev
   cironunes.github.io
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. http://www.meetup.com/AngularJS-Sao-Paulo/
   

   View Slide

7. SINGLE PAGE APPS
   Ciro Nunes
   FOR THE WIN!
   

   View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. SINGLE PAGE APPS
    UX de aplicações nativas no browser!
    

    View Slide

14. SINGLE PAGE APPS
    front end & back end zen
    

    View Slide

15. pro tips
    como começar?
    arquitetura
    

    View Slide

16. arquitetura
    

    View Slide

17. server client
    NORMAL WEBSITES
    

    View Slide

18. server client
    
    data2
    data2
    
    GET /
    NORMAL WEBSITES
    

    View Slide

19. server client
    
    data2
    data2
    
    GET /
    200 OK
    display the
    returned HTML
    NORMAL WEBSITES
    

    View Slide

20. necessidade de integração front/back
    workflow lento
    =(
    

    View Slide

21. server client
    SINGLE PAGE APPS
    

    View Slide

22. server client
    JSON:
    { data1, data2 }
    GET /
    SINGLE PAGE APPS
    

    View Slide

23. server client
    JSON:
    { data1, data2 }
    data1
    data2
    GET /
    200 OK
    SINGLE PAGE APPS
    

    View Slide

24. server client
    JSON:
    { data1, data2 }
    data1
    data2
    GET /
    200 OK
    SINGLE PAGE APPS
    

    View Slide

25. client e server
    totalmente desacoplados
    

    View Slide

26. SERVER
    DB , RESTful API
    

    View Slide

27. CLIENT
    routing, data-binding,
    components, i/o
    

    View Slide

28. possibilita trabalhar em paralelo
    fácil de escalar
    fácil de testar
    =)
    

    View Slide

29. SINGLE PAGE APPS
    front end & back end zen
    

    View Slide

30. como começar?
    

    View Slide

31. SERVER
    DB , RESTful API
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

38. http://expressjs.com/
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

42. CLIENT
    routing, data-binding,
    components, i/o
    

    View Slide

43. ROUTING
    

    View Slide

44. ROUTING
    History API
    

    View Slide

45. DATA-BINDING
    

    View Slide

46. DATA-BINDING
    Hello
    
    $('#userEntry').on('keyup', function() {

    $('#greeting').text('Hello ' + $(this).val);

    });
    

    View Slide

47. COMPONENTS
    

    View Slide

48. COMPONENTS
    web components?
    

    View Slide

49. I/O
    $.ajax({
    type: 'get',
    url: 'http://localhost:8000/items',
    success: function(data) {
    $('#items').html(data);
    }
    });
    

    View Slide

50. que tal um pouco de estrutura?
    

    View Slide

51. routing ngRoute
    data-binding
    components directives
    i/o $http
    mvc
    

    View Slide

52. View Slide

53. DEMO
    

    View Slide

54. pro tips
    

    View Slide

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

    View Slide

56. View Slide

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

    View Slide

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

    View Slide

59. http://github.com/angular/protractor
    

    View Slide

60. CORS
    cross-origin resource sharing
    

    View Slide

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

    View Slide

62. 8+
    suporte
    

    View Slide

63. server.use(restify.CORS({
    origins: ['*']
    }));
    server.use(restify.fullResponse());
    RESTIFY + CORS
    

    View Slide

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

    View Slide

65. SEO
    seja encontrado :)
    

    View Slide

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

    View Slide

67. htttp://prerender.io/
    

    View Slide

68. WORKFLOW
    

    View Slide

69. View Slide

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

    View Slide

71. use e contribua com os melhores projetos!
    

    View Slide

72. View Slide

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

    View Slide