1.
Open-sourcing JavaScript
at the City of Amsterdam
All Things Open 2019, Raleigh N.C.

2.
@gethackteam
Who is this for?

3.
@gethackteam

4.
A little bit about
myself first…
@gethackteam

5.
Roy Derks
@gethackteam

6.
@gethackteam
Amsterdam?

7.
@gethackteam
- Since 1275
- Population: 860,000

8.
@gethackteam
Not in the U.S.!

9.
@gethackteam

10.
@gethackteam
± 4000 miles

11.
@gethackteam
We’re known for…

12.
@gethackteam

13.
@gethackteam

14.
@gethackteam
But we also do tech!

15.
@gethackteam
In 2017, approximately 60,000 people
were employed by more than 1,000
technology companies in Amsterdam,
representing 11% of the total
Amsterdam labour market.

16.
@gethackteam
In 2017, approximately 60,000 people
were employed by more than 1,000
technology companies in Amsterdam,
representing 11% of the total
Amsterdam labour market.

17.
@gethackteam
In 2017, approximately 60,000 people
were employed by more than 1,000
technology companies in Amsterdam,
representing 11% of the total
Amsterdam labour market.

18.
@gethackteam
Even at our local
government

19.
@gethackteam

20.
@gethackteam
- “DataPunt”
- Since 2015
- 85 people strong
- 8 scrum teams

21.
@gethackteam

22.
@gethackteam
We’re developing projects for
civil servants, researchers,
and civilians

23.
@gethackteam
data
information
knowledge

24.
@gethackteam
Or based on problems the city
is facing

25.
@gethackteam

26.
@gethackteam

27.
@gethackteam

28.
@gethackteam
How to solve this?

29.
@gethackteam

30.
@gethackteam
But also technology !

31.
@gethackteam

32.
@gethackteam
“Signalen”
- > 200,000 alerts a year
- Serves ± 800 civil-servants

33.
@gethackteam
And everything is open!

34.
@gethackteam
Why?
- Collaboration
- Reusability
- Transparency
- …
Find out more at https://amsterdam.github.io

35.
@gethackteam
Also, we follow European
guidelines for open standards

36.
@gethackteam
What I’m working on:

37.
@gethackteam

38.
@gethackteam
Portal that combines (almost)
all open data of the city

39.
@gethackteam
“City Data / Atlas”
- > 65,000 views a month
- > 17,000 visitors a month
- Incl. ± 2,000 civil-servants
We’re using the over 35 APIs we also open-sourced!

40.
@gethackteam
It has a long history

41.
@gethackteam

42.
@gethackteam
And it looked like this:

43.
@gethackteam
First version

44.
@gethackteam
Current

45.
@gethackteam
Soon

46.
@gethackteam
Improving the application’s
reusability, because:

47.
@gethackteam

48.
@gethackteam
How are we doing this?

49.
@gethackteam
Abstracting UI and logic

50.
@gethackteam
By creating a UI library

51.
@gethackteam
UI library

52.
@gethackteam
That was actually our first
npm package 🎉

53.
@gethackteam
“Amsterdam Styled
Components”
- Monorepo (3 packages)
- Used by all new projects in
our department

54.
@gethackteam
However, it's challenging to get
the entire city on board

55.
@gethackteam
1. Every project setup is
different
2. The Design System is still in
development
3. Some projects are created
externally

56.
@gethackteam
+ many more

57.
@gethackteam
1. Every project setup is
different
2. The Design System is still in
development
3. Some projects are created
externally

58.
@gethackteam

59.
@gethackteam
1. Every project setup is
different
2. The Design System is still in
development
3. Some projects are created
externally

60.
@gethackteam
We also separated our
analytics logic

61.
@gethackteam
“Matomo Tracker”
- Monorepo (2 packages)
- Used by all new projects in
our department

62.
@gethackteam
What’s next?

63.
@gethackteam
+ many more

64.
@gethackteam
A map based on open
standards and libraries

65.
@gethackteam
The kickoff will be an
internal “hackathon”

66.
@gethackteam
Are we the only one
doing this?

67.
@gethackteam
SCORE Project
9 European cities, 15 partners

68.
@gethackteam
“IoT Registry”
- Developed together with
SCORE partners

69.
@gethackteam
Want to learn more?

70.
Want to learn more?
Search: Roy Derks@gethackteam
https://amsterdam.github.io
https://github.com/amsterdam
https://npmjs.com/org/datapunt