Как я сделал JS-библиотеку Leaflet успешной

Как я сделал JS-библиотеку Leaflet успешной

Leaflet — JS-библиотека для интерактивных карт, взлетевшая до небес популярности за очень короткое время, несмотря на очень крупных и именитых конкурентов. Что обеспечило такой успех и любовь пользователей?

6d07e6d95a43357254698ce9723350e6?s=128

Vladimir Agafonkin

November 17, 2012
Tweet

Transcript

  1. Владимир Агафонкин 11.2012

  2. agafonkin.com /mourner

  3. rain.in.ua

  4. leafletjs.com

  5. None
  6. None
  7. None
  8. None
  9. не только обычные карты

  10. None
  11. None
  12. None
  13. None
  14. февраль 2005 июнь 2006 июнь 2009 май 2011 Google Maps

    API OpenLayers Google Maps API v3
  15. как?..

  16. open source

  17. • 2 года разработки • 8009 строк кода • 1732

    коммита от 86 разных человек • 3233 followers, 535 forks • issues: 188 открытых, 964 закрытых • pull requests: 38 открытых, 328 закрытых
  18. open source это просто

  19. None
  20. None
  21. независимость от провайдеров данных

  22. количество возможностей Images Markers Popups Vectors XYZ tiles GeoJSON WMS

    Layer groups Inertial pan Scroll zoom Dblclick zoom Box zoom Keyboard nav Pinch zoom Dbltap zoom Marker drag Pan anim Zoom anim Zoom buttons Attribution Layer switcher Scale Map rotation Fractional zoom WebGL renderer TMS WMTS TileCache MapGuide MapServer KaMap KaMapCache MultiMap Google Yahoo WorldWind Virtual Earth Bing Zoomify UTFGrid OSM ArcGIS ArcIMS GML GeoRSS KML WFS WFST ArcXML Atom CQL SLD GPX OSM XML OWS Context WKT XLS XML Drawing Editing Graticule Measure Pan control Minimap Permalink Clustering
  23. количество возможностей Images Markers Popups Vectors XYZ tiles GeoJSON WMS

    Layer groups Inertial pan Scroll zoom Dblclick zoom Box zoom Keyboard nav Pinch zoom Dbltap zoom Marker drag Pan anim Zoom anim Zoom buttons Attribution Layer switcher Scale Map rotation Fractional zoom WebGL renderer TMS WMTS TileCache MapGuide MapServer KaMap KaMapCache MultiMap Google Yahoo WorldWind Virtual Earth Bing Zoomify UTFGrid OSM ArcGIS ArcIMS GML GeoRSS KML WFS WFST ArcXML Atom CQL SLD GPX OSM XML OWS Context WKT XLS XML Drawing Editing Graticule Measure Pan control Minimap Permalink Clustering
  24. качество возможностей Images Markers Popups Vectors XYZ tiles GeoJSON WMS

    Layer groups Inertial pan Scroll zoom Dblclick zoom Box zoom Keyboard nav Pinch zoom Dbltap zoom Marker drag Pan anim Zoom anim Zoom buttons Attribution Layer switcher Scale + сторонние плагины
  25. простота

  26. var map = L.map('map') .setView([51.505, -0.09], 13); L.tileLayer( 'http://{s}.tile.osm.org/{z}/{x}/{y}.png') .addTo(map);

    L.marker([51.5, -0.09]) .addTo(map) .bindPopup('Hello World!') .openPopup(); максимально простой API
  27. код: простой снаружи, простой внутри

  28. !"#$%& кода выражать глубокий смысл простыми фразами

  29. часть кода требует комментария? перепишите код, чтобы он стал очевидным

  30. обратная совместимость только вперёд! постоянное улучшение API (тщательно задокументированное)

  31. современные старые (IE 6-8) мобильные (iOS, Android) поддержка браузеров

  32. современные мобильные старые (доступно) поддержка браузеров

  33. скорость отзывчивость легковесность

  34. (min, gzip) JS 27KB CSS 1.8KB PNG 3.2KB

  35. None
  36. CSS3 Transforms 3D CSS3 Transitions requestAnimationFrame

  37. mourner.github.com/simplify-js

  38. дизайн важен не менее, чем код

  39. None
  40. None
  41. кайдзен непрерывное совершенствование

  42. Спасибо! Вопросы? Владимир Агафонкин agafonkin@gmail.com

  43. None
  44. flickr.com/photos/96dpi/2886663273/ flickr.com/photos/pesis/4870052004/ flickr.com/photos/didmyself/5274561305/ использованные фото (Creative Commons)