1.
Elm at large (companies)
Luca Mugnaini
Ecosystem Services Department
Rakuten, Inc.

2.
lucamug

3.
4
https://global.rakuten.com/corp/ (February 2019)

4.
5
https://global.rakuten.com/corp/about/sports_entertainment/ (February 2019)

5.
6
The Market Place

6.
7
Pre-Elm
https://www.rakuten.co.uk/ (February 2019) https://css-tricks.com/introduction-elm-architecture-build-first-application/ (April 2017)

7.
8

8.
9
https://elm-lang.org/blog/how-to-use-elm-at-work (February 2019)

9.
10
Concerns
Search Engine Optimization
Still in version zero.something
Not “famous”

10.
11
Issues
Lack of technical understanding
Lack of transparency
Started too big

11.
13
The Ecosystem

12.
14
Registration, Authentication, Payments
No SEO concerns
On-going transition from Java to Kotlin
High consideration for Functional Programming

13.
15

14.
16
Keys of success
Popular first small prototype
Allies with FP background
Flexible environments

15.
18
Ideas and Solutions

16.
19
Static Page
Style Framework
Widgets
Scenarios
Trinity
Languages
People
One Year
The ”Small Trident” icon is made by Freepok from www.flaticon.com (https://www.flaticon.com/free-icon/small-trident_85126)
The “Cake” icon is made by Google from www.flaticon.com (https://www.flaticon.com/free-icon/cake_565415)

17.
20
Static Page
Style Framework
Widgets
Scenarios
Trinity
Languages
People
One Year
Create a static
page that is
friendly to Search
Engines

18.
21
Fast execution and real-time modifications
SEO friendly, Javascript-disabled friendly
Works in IE10 (almost) out of the box
...
<h2 id="t04"> </h2>
<h3 id="t05"> </h3>
...
Elm.Main.init({
flags: {
...
t04: t("t04"),
t05: t("t05"),
...
},
node: node
});

19.
22
https://static.id.rakuten.co.jp/static/about_security/jpn/
(February 2019)

20.
23
Static Page
Style Framework
Widgets
Scenarios
Trinity
Languages
People
One Year
Simple
implementation
of brand
guidelines and
“living” Style
Guides

21.
24
Html
Element (elm-ui) Element.Input.newPassword
Html.input
CSS
Tricks
Zone
{
Our applications
HTML/CSS

22.
25
Html
elm-ui
style-framework
Element.Input.newPassword
Html.input
Framework.Input.newPassword
CSS
Tricks
Zone
{
Our applications
HTML/CSS
style-framework-rakuten Logos, etc.

23.
26
Element.Input.newPassword :
List (Attribute msg)
-> { onChange : String -> msg
, text : String
, placeholder : Maybe (Placeholder msg)
, label : Label msg
, show : Bool
}
-> Element msg
Framework.Input.newPassword :
List (Attribute msg)
-> { onChange : String -> msg
, text : String
, placeholder : Maybe (Placeholder msg)
, label : Label msg
, show : Bool
, modifiers = List Modifier
, focused : Bool
, wrapperAttrs : List (Attribute msg)
, labelHelper : Label msg
, onShowToggle : msg
}
-> Element msg
elm-ui style-framework
Example with modifiers = [ FloatingLabel ]

24.
27
Always up-to-date, always in sync

25.
28
Static Page
Style Framework
Widgets
Scenarios
Trinity
Languages
People
One Year
Improve and
unify the
registration &
login experience
on existing large
website

26.
29
Widgets can ...
.. be used independently or together
.. run above existing website
.. be added with minimal effort

27.
30
Widget A Widget B Widget C

28.
31
All
Combined
SingleSingle Single
Widget B
v/m/u
Widget A
v/m/u
Widget C
v/m/u
Main
v/m/u

29.
32
Combined
All
<script src="js/widget-A.js">
<script src="js/widget-B.js">
<script src="js/widget-C.js">
SingleSingle Single
Widget B
v/m/u
Widget A
v/m/u
Widget C
v/m/u

30.
33
Static Page
Style Framework
Widgets
Scenarios
Trinity
Languages
People
One Year
Test scenarios
with a lean
development
environment

31.
34

32.
35

33.
36
{
"url": "",
"status": {
"code": 400,
"message": "Bad request"
},
"headers": {
"x-correlation-id": "12345"
},
"body": "{"errorCode":"VALIDATION_ERROR"}"
}

34.
37
Response ┌──────────┐ Unboxed ┌──────┐
=========>│ 200 │========>│ 401 │
╞══════════╡ ╞══════╡
│ ┌──────┐ │ │ data │
│ │ 401 │ │ └──────┘
│ ╞══════╡ │
│ │ data │ │
│ └──────┘ │
└──────────┘
Response ┌──────┐ Unboxed ┌──────┐
=========>│ 401 │========> │ 401 │
╞══════╡ ╞══════╡
│ data │ │ data │
└──────┘ └──────┘
BoxedNormal

35.
38
type alias ScenarioData =
{ name : String
, route : Route.Route
, description : String
, endpoint : Endpoint
}
S_11_5000_11 ->
ScenarioData
"S_11_5000_11"
Route.R_11_Verify_OldUser
"Internal Server Error"
E_03_login_complete

36.
39
Always up-to-date, always in sync (II)

37.
40
Static Page
Style Framework
Widgets
Scenarios
Trinity
Languages
People
One Year
Http enhancements
and giving back to
the community

38.
41
ExtraNormal
type Result body
= Ok body
| Err Error
type Error
= BadUrl String
| Timeout
| NetworkError
| BadStatus Int
| BadBody String
type Result body
= Ok (ResponseData body)
| Err (Error body)
type Error body
= BadUrl String
| Timeout
| NetworkError
| BadStatus (ResponseData body)
| BadBody String
type ResponseData body
= GoodBody Http.Metadata body
| BadBody Http.Metadata String String

39.
42
rakutentech.github.io/http-trinity

40.
43
Static Page
Style Framework
Widgets
Scenarios
Trinity
Languages
People
One Year
Facilitate the
development for
multilanguage
applications

41.
44

42.
45
Static Page
Style Framework
Widgets
Scenarios
Trinity
Languages
People
One Year
Establish a team
of Elm developers

43.
46
Training
Build a friendly environment for back-end engineer
Where “friendly” means without HTML / CSS / JS
Training (around 8 sessions of 1 hour each)
Pair programming

44.
47
Static Page
Style Framework
Widgets
Scenarios
Trinity
Languages
People
One Year
After one year
~ 10 engineers writing Elm
~ 12 interns learned Elm
~ 8 on-going projects in Elm

45.
48
Where people are struggling
Changing paradigm
Limited documentation
Lack of examples
Required time to learn

46.
49
What people like
No need to learn CSS
Feel safe because the compiler
Everything is included
Fun

47.
50

48.
51
Elm in Japan
• Japanese Elm guide: guide.elm-lang.jp
• elm-jp.connpass.com 135 members
• elm-tokyo.connpass.com 165 members
• discordapp.com/.../elm-jp 250 members
by Jinjor
, etc.

49.
52
1 Norway 7.6
2 Sweden 3.2
3 Finland 2.3
4 Switzerland 2.3
5 Netherlands 1.7
6 Australia 1.6
7 Belgium 1.4
8 Canada 1.3
9 Czech Republic 1.1
10 Germany 1.1
11 United States 1.1
12 United Kingdom 1.0
13 France 0.7
14 Spain 0.5
15 Poland 0.5
16 Argentina 0.3
17 Russia 0.1
18 Japan 0.1
19 Brazil 0.1
Elm developers by country
per 1 M inhabitants, from “The State of Elm 2018”
https://www.brianthicks.com/post/2018/12/26/state-of-elm-2018-results/ (February 2019)

50.
54
Thank you!

51.
55
All pictures are taken from one of these website and are under the
CC0 license (Free for personal and commercial use, no attribution
required):
• https://www.pexels.com
• https://unsplash.com/
• https://pixabay.com
The picture of the Oslo City Hall is mine.
Data of Rakuten company (Global members, Number of services,
etc.) are taken from the public website
https://global.rakuten.com/corp/ in February 2019.
All screenshot of public website are taken in February 2019 (except
the screenshot of css-tricks website that is from April 2017).
Data about Elm are coming from “The State of Elm”: 2016, 2017,
2018.
“Memes” come from Internet and have not attributions.
Other graphic elements are from https://freedesignfile.com/,
https://www.flaticon.com/ and are free to be used for personal and
commercial use.
The ”Small Trident” icon is made by Freepok from www.flaticon.com
(https://www.flaticon.com/free-icon/small-trident_85126)
The “Cake” icon is made by Google from www.flaticon.com
(https://www.flaticon.com/free-icon/cake_565415)
Other icons are from Rakuten https://rakuten-frontend.github.io/rex-
icons/
All other graphic elements are original, made by myself.
Copyright Notes