Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Stop using Bootstrap please! - Davide Di Pumpo - Codemotion Milan 2016

460 views

Published on

Bootstrap è di sicuro diventato uno dei Framework front-end che tutti conoscono ed hanno utilizzato almeno una volta. Per alcuni Front-end developer è diventato uno standard de facto. Ma è davvero tutto oro quello che luccica? La sua velocità di utilizzo è in realtà assimilabile ad un prestito. Hai chiavi in mano, ma sai quanto andrai a pagare nel tempo? Durante questo talk vedremo quali sono le insidie che si nascondono dietro questo (e similari) framework e come sostituirlo grazie a tecnologie e metodologie moderne.

Published in: Technology
  • Be the first to comment

Stop using Bootstrap please! - Davide Di Pumpo - Codemotion Milan 2016

  1. 1. top uin oottrap PLZ! Novemer 25th 2016
  2. 2. Wh  a  I?
  3. 3. David  D  Pump Creative Technologit Digital Architect at  Co­organizer  Makheth on:  ,  ,  I like Cat, Drink, Comic and Videogame... Ojectwa Milano Frontend Twitter Githu Internet
  4. 4. Le '  tar  Meaow!
  5. 5. Prologue urve   m !!!
  6. 6. Do ou ue oottrap? Do ou ue it ecaue it' imple? Do ou ue it ecaue it' fat?
  7. 7. D  o  lik  uh ?
  8. 8. om  of o , wil  hat  m !
  9. 9. Wh  d  I d  tha ?
  10. 10. D  o  rememer th  uh lid  fro  earlier?
  11. 11. Chapter 01 Ol  Wid  We
  12. 12. Or no    ol ?
  13. 13. It wa onl 5 ear ago
  14. 14. There were nightmare out there! 
  15. 15. Twitter lueprin  an    o
  16. 16. Doe  Twitter u  Twitter oottrap? Internall, we ue it in a lot of application. On Twitter.com, ou can  nd it and piece in our dropdown menu, form, and utton. “ ”Mark Otto, creator of oottrap
  17. 17. Chapter 02 M  an  th oottrap
  18. 18. Lov !
  19. 19. ut I had a lover 
  20. 20. Mae two... 
  21. 21. ut thi one ended all: FLXOX
  22. 22. Wh not onl e friend? 
  23. 23. And I tarted to quetion melf
  24. 24. Chapter 3 Javacrip
  25. 25. oottrap' plugin don't fall ack particularl gracefull when Javacript i dialed“ ”oottrap Documentation
  26. 26. eautiful enhancement? What?
  27. 27. veron  ue  Jav crip  toda ! le ~1% More than xplorer 9 or 10 TW... ource tatCounter
  28. 28. Quer ?
  29. 29. Angular, Reac , Vu ?
  30. 30. Wher '  th  loa ? Javacript Fallack Avoid jQuer or ue inide j framework
  31. 31. Chapter 4 C
  32. 32. Heav ? We tart with 142.6KB or 20.8KB gzipped
  33. 33. Uele clae .col-xs-1?
  34. 34. Wha  aou  Unc ?
  35. 35. ae  o   oa ...
  36. 36. What aout vertical alignment? Hol Grail laout?
  37. 37. ven display: table; i etter erioul...
  38. 38. Ok, there i an alpha with  exox option... ut it doen't have fallack... And C Grid i getting cloe...
  39. 39. Medi  querie
  40. 40. 4 reakpoint , ae  o DVIC?
  41. 41. peci cit .panel > .table-responsive:first-child > .table:first- border-top-right-radius: 3px; }
  42. 42. Wher '  th  loa ? Override Optimization Cutomization
  43. 43. Chapter 5 HTML
  44. 44. Do ou have a prolem with that?
  45. 45. <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0"> oottrap documentation
  46. 46. eparatio  of concern W3C Do ou rememer:  ?C Zen Garden
  47. 47. Wher '  th  loa ? Dif cultie to reue code Dif cultie to temif / redeign Deug with meaningle clae peci t nightmare !important
  48. 48. Chapter 6 Preproceor
  49. 49. Uing oottrap via a preproceor i a lot etter
  50. 50. .author-nameLast { @extend .col-md-4; } or .author-nameLast { @include make-md-column(4); }
  51. 51. u ...
  52. 52. @ ten xtending i inviile. xtending doen’t necearil help  le weight, contrar to the aing. xtending doen’t work acro media querie. xtending i not exile. Mixin have aolutel no drawack. “ ”Hugo Giraudel
  53. 53. @m in .author-nameLast { @include make-xs-column(12); @include make-sm-column(6); @include make-md-column(4); @include make-lg-column(3); }
  54. 54. // Pagination @mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, > li { > a, > span { padding: $padding-vertical $padding-horizontal; font-size: $font-size; line-height: $line-height; } &:first-child { > a, > span { @include border-left-radius($border-radius); } }
  55. 55. Wher '  th  loa ? Add a reak point Too much DOM
  56. 56. Chapter 7 Deig
  57. 57. VRY OOTTRAP WIT VR
  58. 58. o, eah, there' a reaon wh a lot of weite look like thi. ecaue it work.“ ”
  59. 59. urger utton can HALV converion rate! ource
  60. 60. Wha  aou  carouel ?
  61. 61. 1% clicked a feature. Of thoe, 89% were in the  rt poition. 1% of click for the mot igni cant oject on the home page? “ ”ource
  62. 62. Yeah, ut I can change ever ingle apect of oottrap!
  63. 63. Ok, what aout uing omething le loated? 
  64. 64. Wher '  th  loa ? Undertand what pattern don't work for ou Tr to ecape oottrap pattern
  65. 65. Chapter 8 Acceiilit
  66. 66. erioul, oottrap improved a lot in acceiilit, and alpha 4 i a lot etter. ut...
  67. 67. Pleae ue  !THI
  68. 68. and  !read aout color
  69. 69. Wher '  th  loa ? Make it acceile
  70. 70. Chapter 9 or how to avoid fale mth.   Remin  m  wh  I u oottrap
  71. 71. I '  fa a  wh ? Let' a it' fat for developer
  72. 72. Technica  de "a concept in programming that re ect the extra development work that arie when code that i ea to implement in the hort run i ued intead of appling the et overall olution" Wikipedia
  73. 73. I '    or  of tandar Yea , lik  Fla , tal we ite , Geocitie ...
  74. 74. Yea ,   lo  of jo prop al  hav oottrap a  requiremen Do ou reall want to work to  x me oottrap implementation?
  75. 75. I '    goo tartin  poin for intern O , com  o ...
  76. 76. I it a good idea to learn C without eeing that?   Mae ou want them to learn an OOC anti pattern?
  77. 77. Chapter 10 Alternative
  78. 78. GO Modular!
  79. 79. Adopt a methodolog: M ITC
  80. 80. Chooe a grid: u Nea uperG G
  81. 81. Do ou need component? utton T ograph Re ll
  82. 82. Githu i    wonder  plac
  83. 83. I '  dangerou  t  g  alon
  84. 84. onu track Recap
  85. 85. Javacript Oh god no C Nope HTML Nope Preproceor If ou have Deign Quetionale Acceiilit With plugin
  86. 86. TLDR Prototpe, internal tool/admin, uncle' weite Y! Production weite NOP!
  87. 87. A la  reao  t avoi oottrap?
  88. 88. C'h  rott  er *****“ ”@dertella
  89. 89. Inight  an  iliograph
  90. 90. Article: You don't need oottrap oottrap ankruptc top emedding oottrap clae oottrap an intervantion OOC i an anti­pattern Wh we don't ue oottrap oottrap ou're doing it wrong Wh don’t ou ue oottrap? The hamurger menu doen't work hould I ue a carouel? oottrap acceiilit iue

×