Leaflet: an Open Source Success Story [Topconf 2013]

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.

6d07e6d95a43357254698ce9723350e6?s=128

Vladimir Agafonkin

November 07, 2013
Tweet

Transcript

  1. An Open Source Success Story November 2013 Vladimir Agafonkin

  2. None
  3. None
  4. February 2005 June 2006 June 2009 May 2011 Google Maps

    API OpenLayers Google Maps API v3
  5. None
  6. The Story

  7. None
  8. None
  9. April 2008

  10. None
  11. None
  12. we need to build a full-featured API quickly „

  13. lets build on top of OpenLayers„

  14. None
  15. None
  16. None
  17. None
  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
  20. None
  21. None
  22. Web Maps Lite

  23. OK, lets see our new awesome OL-based API... „ OMG

    why is it SO FAST?!
  24. None
  25. one-man effort closed source other projects two years later...

  26. None
  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

  31. None
  32. do what you want, we’ll pay you to have you

    in our team „
  33. The Present

  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  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

  47. None
  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

  56. None
  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

  60. None
  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

  66. None
  67. attention to detail

  68. kaizen continuous improvement

  69. exercise

  70. None
  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

  74. None
  75. None
  76. None
  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