lupapiste an interactive service for citizens with html 5 ... · lupapiste – an interactive...

58
Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012 Senior Software Designer Timo Lehtonen [email protected]

Upload: others

Post on 21-Sep-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Lupapiste – an interactive service for citizens

with HTML 5 JS + Clojure + MongoDB

Nääsvillen oliopäivät 13.12.2012

Senior Software Designer

Timo Lehtonen [email protected]

Page 2: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Top 100-list of Javala:

Gamification - apply game-like features to a (often boring) non-game thing.

Page 3: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012
Page 4: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Solita – an ICT company from Nääsville

2012

Finlayson 1962: Thousands of people in manufacturing business

Copyright: Tampereen kaupungin kuva-arkisto

Finlayson 2012: 200 people manufacturing Online businesses, BI solutions, ERP systems, …

Page 5: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Solita has one value: Care

Page 6: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012
Page 7: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012
Page 8: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012
Page 9: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012
Page 10: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Source: levikintarkastus.fi

ERP

Page 11: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Customer: environmental administration (Ympäristöministeriö) Released: in march 2013.

Page 12: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Aloitus

Page 13: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Aloitus Aamulehti 23.8.2012

Lupapiste handles 16 permit types in 20 pilot municipalities in the first phase

Page 14: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Keynote by Cockburn at Oliopäivät 2008

Page 15: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Haikala, I., and J. Märijärvi. "Ohjelmistotuotanto. 11. p." Jyväskylä: Gummerrus Kirjapaino Oy (2006).

Page 16: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Haikala, I., and J. Märijärvi. "Ohjelmistotuotanto. 11. p." Jyväskylä: Gummerrus Kirjapaino Oy (2006).

Pekka Abrahams-son at Oliopäivät 2012: ”Be ready to fail. Create a theory.”

Pasi Kovanen, Jarkko Järvenpää, Vincit at Oliopäivät 2012: try, measure and learn, try again

A similar circle of ”do, make a theory, do (fail?) again!”

Page 17: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Keynote by Cockburn at Oliopäivät 2008

Page 18: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Keynote by Cockburn at Oliopäivät 2008

Page 19: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012
Page 20: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012
Page 21: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012
Page 22: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

MongoDB

Clojure back-end

POST /rest/command: {”command”: ”add-comment”

”applicationId”: ”123”

”text”: ”Autotallin räys…”}

Command

MongoDB

Application Architecture

Page 23: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Clojure back-end

POST /rest/command: {”command”: ”add-comment”

”applicationId”: ”123”

”text”: ”Autotallin räys…”}

Command

MongoDB

Application Architecture

Page 24: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Clojure back-end

POST /rest/command: {”command”: ”add-comment”

”applicationId”: ”123”

”text”: ”Autotallin räys…”}

Command

MongoDB

Application Architecture

{”ok”: ”true”}

Page 25: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Clojure back-end

POST /rest/command: {”command”: ”add-comment”

”applicationId”: ”123”

”text”: ”Autotallin räys…”}

Command

MongoDB

Application Architecture

{”ok”: ”true”}

GET /rest/application

Page 26: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Clojure back-end

POST /rest/command: {”command”: ”add-comment”

”applicationId”: ”123”

”text”: ”Autotallin räys…”}

Command

MongoDB

Application Architecture

{”ok”: ”true”}

GET /rest/application

Page 27: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Clojure back-end

POST /rest/command: {”command”: ”add-comment”

”applicationId”: ”123”

”text”: ”Autotallin räys…”}

Command

MongoDB

Application Architecture

{”ok”: ”true”}

GET /rest/application

Page 28: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Clojure back-end

POST /rest/command: {”command”: ”add-comment”

”applicationId”: ”123”

”text”: ”Autotallin räys…”}

Command

MongoDB

Application Architecture

{”ok”: ”true”}

GET /rest/application

Page 29: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012
Page 30: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

4

Be slow – design the schema first. Design it using a UI demo.

A new foundation added at Oliopäivät 2012.

Page 31: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Be slow - schema first

Schema - Greek word skhēma - shape, diagram, or more generally plan.

Source: Uusi sivistyssanakirja freely translated

4

Be slow – design the schema first. Design it using a UI demo.

Page 32: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Be slow - schema first

Schema - Greek word skhēma - shape, diagram, or more generally plan.

Source: Uusi sivistyssanakirja freely translated

Plan 1. Lupapiste data model diagram

4

Be slow – design the schema first. Design it using a UI demo.

Page 33: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Be slow - Proof the schema with real data

Plan 1b. Data model with explanation.

Schema - Greek word skhēma - shape, diagram, or more generally plan.

Source: Uusi sivistyssanakirja freely translated

4

Be slow – design the schema first. Design it using a UI demo.

Page 34: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Database schema is a service interface. The only specification that matters.

Page 35: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Big Data

1. Design the schema first.

Page 36: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Big Data

Then build an app on top of it

HTML 5 JS SPA UI

Clojure back-end

REST API

JSON

Page 37: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Big Data

Then build an app on top of it

HTML 5 JS SPA UI

Clojure back-end

REST API

JSON

Page 38: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Big Data

Then build an app on top of it

HTML 5 JS SPA UI

Clojure back-end

REST API

JSON

Page 39: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Big Data

Then build an app on top of it

HTML 5 JS SPA UI

Clojure back-end

REST API

Page 40: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Big Data

Then build an app on top of it

HTML 5 JS SPA UI

Clojure back-end

REST API

JSON

Page 41: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Big Data

Then build an app on top of it

HTML 5 JS SPA UI

Clojure back-end

REST API

JSON

Page 42: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Big Data

Then build an app on top of it

HTML 5 JS SPA UI

Clojure back-end

REST API

Page 43: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Big Data

Then build an app on top of it

HTML 5 JS SPA UI

Clojure back-end

REST API

JSON

Page 44: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Big Data

Then build an app on top of it

HTML 5 JS SPA UI

Int 1 Int 2

BI

Int 3

Clojure back-end

REST API

JSON

REST API

Page 45: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Big Data

Then build an app on top of it

HTML 5 JS SPA UI

Integration 1

Clojure back-end

REST API

JSON Integration 2

Page 46: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Big Data

Then build an app on top of it

HTML 5 JS SPA UI

Integration 1 Integration 3

Clojure back-end

REST API

JSON

REST API

Integration 2

Page 47: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Big Data

Then build an app on top of it

HTML 5 JS SPA UI

Integration 1 Integration 3

Clojure back-end

REST API

JSON

REST API

Integration 2

Page 48: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Big Data

Then build an app on top of it

HTML 5 JS SPA UI

Integration 1 Integration 3

Clojure back-end

REST API

JSON

REST API

Integration 2

Page 49: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Big Data

Then build an app on top of it

HTML 5 JS SPA UI

Integration 1 Integration 3

Clojure back-end

REST API

JSON

REST API

Integration 2

Page 50: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Big Data

Then build an app on top of it

HTML 5 JS SPA UI

Integration 1 Integration 3

Clojure back-end

REST API

JSON

REST API

Integration 2

BI

Page 51: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Big Data

Then build an app on top of it

HTML 5 JS SPA UI

Clojure back-end

REST API

JSON

BI

Integration 1 Integration 3

REST API

Integration 2

Page 52: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Database

HTML 5 JS SPA UI

Clojure back-end

REST API

JSON

BI

Integration 1 Integration 3

REST API

Integration 2 Then build an app on top of it

Relational database has a schema. It has a plan with constraints.

Page 53: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Database

HTML 5 JS SPA UI

Clojure back-end

REST API

JSON

BI

Integration 1 Integration 3

REST API

Integration 2 Then build an app on top of it

Relational database has a schema. It has a plan with constraints.

Page 54: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Database

HTML 5 JS SPA UI

Clojure back-end

REST API

JSON

BI

Integration 1 Integration 3

REST API

Integration 2 Then build an app on top of it

Relational database has a schema. It has a plan with constraints.

Page 55: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Database

HTML 5 JS SPA UI

Clojure back-end

REST API

JSON

BI

Integration 1 Integration 3

REST API

Integration 2 Then build an app on top of it

Relational database has a schema. It has a plan with constraints.

Page 56: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

4

Be slow – design the schema first. Design it using a UI demo.

1. The society has constraints, because people make errors

• You can not build a sauna everywhere, because its unsafe of would ruin the beautiful lake scenes

2. Use database schema with constraints, because people make errors

• You cannot refactor data model field names easily, so use a schema and a validator to prevent future errors

3. Then build an app on top of it

Page 57: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Choose any technology to get from A to B - cycle or sail …. or swim :)

A

B

Page 58: Lupapiste an interactive service for citizens with HTML 5 ... · Lupapiste – an interactive service for citizens with HTML 5 JS + Clojure + MongoDB Nääsvillen oliopäivät 13.12.2012

Thank you

› Questions, comments?

› Feedback: [email protected]