Leaflet: an Open Source Success Story [Topconf 2013]

Leaflet, a JavaScript library for mobile-friendly interactive maps, has come a long way since its inception. It started as a one-night hack, evolved over the next two years as a closed proprietary API, developed by one person, and then was finally rewritten from scratch as an open source library in 2011. Leaflet is now the most popular open source solution for publishing maps on the Web, used by the world's biggest companies, including Flickr, Foursquare, Vkontakte, IGN, Wikipedia, New York Times and the likes.

How did it became so successful despite strong competition and lack of funding? It's an amusing story of pursuing a dream, full of advice and inspiration for aspiring open source developers and anyone who is passionate about their product, told firsthand by Leaflet creator and lead developer.

Transcript

1. An Open Source Success Story November 2013 Vladimir Agafonkin
4. February 2005
   June 2006
   June 2009
   May 2011
   Google Maps API
   OpenLayers
   Google Maps API v3
   
6. The Story
9. April 2008
12. we need to build a full-featured API quickly „
13. lets build on top of OpenLayers„
18. basic map API requirements •map tiles •markers •popups •polylines and polygons
19. mourner: hey guys, I was thinking of building a really simple, lightweight OpenLayers alternative for our API... #osmdev angry_guy: nobody gives a crap about your alternative, YOU IDIOT, just build a wrapper around OL like all others or FAIL miserably
22. Web Maps Lite
23. OK, lets see our new awesome OL-based API... „ OMG why is it SO FAST?!
25. one-man effort
    closed source
    other projects two years later...
27. hey Vlad, I reverse-engineered your API to fix this nasty bug, here's the patch...„
28. open source lets do it! September 2010
29. Web Maps Lite
30. bit.ly/leaflet-2yrs
32. do what you want, we’ll pay you to have you in our team „
33. The Present
44. • 3 years of development • ~6900 lines of code • ~2700 commits from ~150 people • ~6200 stars, ~1100 forks • issues: ~160 open, ~2000 closed • pull requests: 32 open, ~750 closed
45. leafletjs.com/plugins.html
    ! 94 plugins
46. Leaflet.markercluster
48. Leaflet.draw
49. simplicity
50. number of features 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
51. number of features 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
52. quality of features 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 + third-party plugins
53. convention over configuration
54. 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: as simple as possible
55. code:
    simple outside,
    simple inside
57. function interPathHelper(path1, path2, justCount) {! path1 = R._path2curve(path1);! path2 = R._path2curve(path2);! var x1, y1, x2, y2, x1m, y1m, x2m, y2m, bez1, bez2,! res = justCount ? 0 : [];! for (var i = 0, ii = path1.length; i < ii; i++) {! var pi = path1[i];! if (pi[0] == "M") {! x1 = x1m = pi[1];! y1 = y1m = pi[2];! } else {! if (pi[0] == "C") {! bez1 = [x1, y1].concat(pi.slice(1));! x1 = bez1[6];! y1 = bez1[7];! } else {! bez1 = [x1, y1, x1, y1, x1m, y1m, x1m, y1m];! x1 = x1m;! y1 = y1m;! }! for (var j = 0, jj = path2.length; j < jj; j++) {! var pj = path2[j];! if (pj[0] == "M") {! x2 = x2m = pj[1];! y2 = y2m = pj[2];! } else {! if (pj[0] == "C") {! bez2 = [x2, y2].concat(pj.slice(1));! x2 = bez2[6];! y2 = bez2[7];! } else {! bez2 = [x2, y2, x2, y2, x2m, y2m, x2m, y2m];! x2 = x2m;! y2 = y2m;! }! var intr = interHelper(bez1, bez2, justCount);! if (justCount) {! res += intr;! } else {! for (var k = 0, kk = intr.length; k < kk; k++) {! intr[k].segment1 = i;! intr[k].segment2 = j;
58. this code is so smart, I won't contribute — others would laugh at my lousy JS and I'd certainly break something „
59. Open Source
61. it's not enough to be open
    you need to be transparent
62. make it as simple as possible
    so that people can contribute
63. the poetry of code
    expressing deep meaning
    through simple words
64. fast
    responsive
    lightweight
65. design matters as much as code
67. attention to detail
68. kaizen
    continuous improvement
69. exercise
71. exercise writing simple and beautiful code
72. backwards compatibility full throttle! continuous API improvement (well-documented)
73. being responsive is key to building a community
77. The Future
78. upcoming features: removing features!
79. simplicity
80. •get excited •build cool stuff •believe in yourself •pursue your dreams •push open source •listen to my band rain.in.ua Recap
81. Thanks!
    Questions? Vladimir Agafonkin agafonkin@gmail.com