Tweet
Tweet

Slide 1

Slide 1 text

An Open Source Success Story November 2013 Vladimir Agafonkin

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

February 2005 June 2006 June 2009 May 2011 Google Maps API OpenLayers Google Maps API v3

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

The Story

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

April 2008

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

we need to build a full-featured API quickly „

Slide 13

Slide 13 text

lets build on top of OpenLayers„

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

basic map API requirements •map tiles •markers •popups •polylines and polygons

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Web Maps Lite

Slide 23

Slide 23 text

OK, lets see our new awesome OL-based API... „ OMG why is it SO FAST?!

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

one-man effort closed source other projects two years later...

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

hey Vlad, I reverse-engineered your API to fix this nasty bug, here's the patch...„

Slide 28

Slide 28 text

open source lets do it! September 2010

Slide 29

Slide 29 text

Web Maps Lite

Slide 30

Slide 30 text

bit.ly/leaflet-2yrs

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

do what you want, we’ll pay you to have you in our team „

Slide 33

Slide 33 text

The Present

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

• 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

Slide 45

Slide 45 text

leafletjs.com/plugins.html ! 94 plugins

Slide 46

Slide 46 text

Leaflet.markercluster

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

Leaflet.draw

Slide 49

Slide 49 text

simplicity

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

convention over configuration

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

code: simple outside, simple inside

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

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;

Slide 58

Slide 58 text

this code is so smart, I won't contribute — others would laugh at my lousy JS and I'd certainly break something „

Slide 59

Slide 59 text

Open Source

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

it's not enough to be open you need to be transparent

Slide 62

Slide 62 text

make it as simple as possible so that people can contribute

Slide 63

Slide 63 text

the poetry of code expressing deep meaning through simple words

Slide 64

Slide 64 text

fast responsive lightweight

Slide 65

Slide 65 text

design matters as much as code

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

attention to detail

Slide 68

Slide 68 text

kaizen continuous improvement

Slide 69

Slide 69 text

exercise

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

exercise writing simple and beautiful code

Slide 72

Slide 72 text

backwards compatibility full throttle! continuous API improvement (well-documented)

Slide 73

Slide 73 text

being responsive is key to building a community

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

The Future

Slide 78

Slide 78 text

upcoming features: removing features!

Slide 79

Slide 79 text

simplicity

Slide 80

Slide 80 text

•get excited •build cool stuff •believe in yourself •pursue your dreams •push open source •listen to my band rain.in.ua Recap

Slide 81

Slide 81 text

Thanks! Questions? Vladimir Agafonkin [email protected]