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

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

Transcript

1. Владимир Агафонкин 11.2012
2. agafonkin.com /mourner
3. rain.in.ua
4. leafletjs.com
9. не только обычные карты
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 это просто
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
36. CSS3 Transforms 3D CSS3 Transitions requestAnimationFrame
37. mourner.github.com/simplify-js
38. дизайн важен не менее, чем код
41. кайдзен непрерывное совершенствование
42. Спасибо! Вопросы? Владимир Агафонкин agafonkin@gmail.com
44. flickr.com/photos/96dpi/2886663273/ flickr.com/photos/pesis/4870052004/ flickr.com/photos/didmyself/5274561305/ использованные фото (Creative Commons)