Guida galattica per frontendisti

È un fatto importante, ancor che comunemente noto, che il mondo frontend si è espanso e si espande ancora a gran velocità e in modo esponenziale. Per esempio, sul pianeta Terra, l'uomo ha continuato a creare, sempre più alacremente, framework, librerie e ogni qualsivoglia diavoleria. Riuscire a raccapezzarsi, soprattutto agli inizi del viaggio, con tutte queste tecnologie riesce difficile spesso anche ai navigatori più smaliziati. Ma non vi preoccupate, o baldi giuovani e pulzelle, attraverso la nostra Guida riuscirete a navigare come dei provetti delfini attraverso le impervie stringhe della galassia Frontend!

Transcript

1. Le stravaganti vicissitudini di un frontendista (?) moderno
   Davide Di Pumpo - Campus Party 2017 - Milano
   

   View Slide

2. CHI SONO
   Frontend Developer
   Co-organizer di
   Speaker e insegnante per passione
   sull'internet
   Amante di gatti, fumetti e arcade
   @Credimi
   Milano Frontend Meetup
   MakhBeth
   

   View Slide

3. È TEMPO DI
   INIZIARE
   (PURTROPPO)
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. Ma il frontend è grande come una galassia
   Inoltre come l'universo continua ad espandersi
   

   View Slide

8. View Slide

9. View Slide

10. REALIZZIAMO UN SITO WEB
    

    View Slide

11. REALIZZIAMO QUALCOSA DI
    SEMPLICE
    

    View Slide

12. View Slide

13. View Slide

14. O ALMENO IL FRONTEND ???
    

    View Slide

15. PER PRIMA COSA ABBIAMO BISOGNO
    DI...
    

    View Slide

16. View Slide

17. View Slide

18. SPECIFICHE
    Deve avere un titolo editabile
    Si può aggiungere un elemento
    L'elemento deve poter essere editato
    Ogni elemento della lista deve poter avere uno stato:
    Non finito
    Finito
    Sommi capi
    Ritardato
    Il testo deve poter essere formattato
    

    View Slide

19. COME (ALTRO) ARRIVANO LE
    SPECIFICHE AL FRONTEND?
    BEH CON UN
    

    View Slide

20. View Slide

21. Il mockup è l'attività di riprodurre un oggetto o modello
    in scala ridotta o maggiorata. Chi si dedica
    professionalmente a tale attività è detto (in lingua
    inglese) mockup artist.
    Wikipedia
    

    View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. WEB COMPONENTS
    

    View Slide

29. Ma componentizzare non è solo qualcosa di tecnico
    

    View Slide

30. View Slide

31. CLICK ME
    

    View Slide

32. Dobbiamo costruire un frontend
    Abbiamo le specifiche
    Abbiamo un mockup
    Abbiamo suddiviso in componenti
    

    View Slide

33. DEVO REINVENTARE LA RUOTA?
    CI SARÀ QUALCOSA LÁ FUORI?
    

    View Slide

34. View Slide

35. NO SERIAMENTE È FACILE, USATE:
    

    View Slide

36. View Slide

37. View Slide

38. QUESTIONE DI TIMING
    

    View Slide

39. View Slide

40. View Slide

41. VALUTATE LA COMMUNITY
    

    View Slide

42. View Slide

43. CHIEDETE CONSIGLIO
    

    View Slide

44. NON ESISTE IL SILVER BULLET
    

    View Slide

45. LO CHEF CONSIGLIA:
    ANDATE MODULARE E SCEGLIETE
    GLI STANDARD
    

    View Slide

46. View Slide

47. A SCRIVERE I TEST
    

    View Slide

48. View Slide

49. RIPRENDIAMO LE SPECIFICHE
    Deve avere un titolo editabile
    Si può aggiungere un elemento
    L'elemento deve poter essere editato
    Ogni elemento della lista deve poter avere uno stato:
    Non finito
    Finito
    Sommi capi
    Ritardato
    Il testo deve poter essere formattato
    

    View Slide

50. NON DIMENTICATE MAI
    L'ACCESSIBILITÀ
    

    View Slide

51. Scegliete i tool
    Scrivete i test PRIMA
    Sviluppate accessibile
    

    View Slide

52. Finalmente abbiamo messo mano al codice
    
    

    View Slide

53. View Slide

54. View Slide

55. Ok, sul vostro browser tutto funziona ma...
    

    View Slide

56. View Slide

57. View Slide

58. Se non troverete voi i vostri bug, li troverà qualcun altro
    UAT USER ACCEPTANCE TESTING
    

    View Slide

59. REGRESSION TEST
    

    View Slide

60. View Slide

61. Quando ero giovane
    

    View Slide

62. Fortunatamente oggi esistono i developer tool! e
    !
    stack
    overflow
    

    View Slide

63. Imparatene uno (il mio consiglio: Chrome o Firefox)
    ma ricordate che oramai ogni browser ne ha uno
    

    View Slide

64. Inoltre tra le novità moderne, ci sono IDE ed Editor a
    darci una mano
    

    View Slide

65. MA NON CI SONO SOLO I BUG
    

    View Slide

66. View Slide

67. View Slide

68. MA SE AVETE:
    scritto modulare
    fatto i test
    portato con voi un asciugamano
    

    View Slide

69. View Slide

70. Test, Test, Test per dormire sereni
    Debuggare con i giusti tool
    Scrivere codice sapendo che può cambiare
    

    View Slide

71. View Slide

72. L'angolo dei consigli
    

    View Slide

73. View Slide

74. La guida galattica per autostoppisti, sull'argomento
    amore, dice evitatelo se possibile
    

    View Slide

75. View Slide

76. View Slide

77. e per finire...
    

    View Slide

78. View Slide

79. View Slide