The Power of Elm in JavaScript

How to bring some elm power in JavaScript. Is it possible? Let's see!

Transcript

1. The Power of Elm in JavaScript
2. @franzejr
8. Before starting...
9. This presentation is based on
10. open-source code It's not theory.
11. we really enjoy using these things
16. elm
18. Why should I care?
20. ...many of the common issues that
21. front-end developers have to deal with just don't exist in Elm
22. don't exist
25. How elm can achieve such thing?
26. Errors will happen at compile time
28. Compiler as an assistant
30. http://elm-lang.org/blog/compilers-as-assistants
32. Strong Static Types
33. No null or undefined
34. Purely functional
36. Total immutability state
37. Reactive by design
38. Imperative a = b + c if we change b, a will NOT be updated.
39. Reactive a = b + c if we change b, a will BE updated.
40. Confidence in Programming
41. Me writing Haskell: 30% test coverage. Scala: 60% test coverage. Ruby: 97% test coverage. Guess the order of reliability of code...
43. 1. Make changes, any changes. 2. The compiler tells what you missed. 3. Go to 1.
44. No runtime exceptions
45. But I can't use elm now
46. !
47. Bring these things to JavaScript
48. Static Types
49. Flow
50. // @flow import { Record, Map } from "immutable"; import FormType from "./FormType"; import QuestionSubmissionType from "./QuestionSubmissionType"; export default class Model extends Record({ form: new FormType(), submissions: new Map(), currentStep: 0, submitted: false, errors: new Map(), apiKey: "" }) { form: FormType; submissions: Map<string, QuestionSubmissionType>; currentStep: number; apiKey: string; }
51. // @flow import { Record, Map } from "immutable"; // --> import FormType from "./FormType"; import QuestionSubmissionType from "./QuestionSubmissionType"; export default class Model extends Record({ form: new FormType(), submissions: new Map(), currentStep: 0, submitted: false, errors: new Map(), apiKey: "" }) { form: FormType; submissions: Map<string, QuestionSubmissionType>; currentStep: number; apiKey: string; }
52. src/output_lib/types/Model.js:9 9: form: new FormType(), ^^^^^^^^ identifier `FormType`. Could not resolve name Found 1 error
53. function decodeForm(data: ApiForm): FormType { // Decode the questions on their own const questions = List(data.questions.map(decodeQuestion)); return 0; return new FormType({ id: data.id, applicationId: data.application.id, completionContent: data.completion_content, sections: List( data.sections.map(section => { return decodeSection(section, questions); }) ), persisted: true }); }
54. ➜ formulae_react git:(master) flow status src/output_lib/decoders.js:201 201: return 0; ^ number. This type is incompatible with the expected return type of 198: function decodeForm(data: ApiForm): FormType { ^^^^^^^^ FormType src/output_lib/decoders.js:202 202: return new FormType({ ^ unreachable code Found 2 errors
55. function myFunction() { let a = b; }
56. ➜ formulae_react git:(master) ✗ flow status src/output_lib/decoders.js:199 199: let a = b; ^ identifier `b`. Could not resolve name Found 1 error
57. function myFunction() { let a = "hello" * 5; }
58. ➜ formulae_react git:(master) ✗ flow status src/output_lib/decoders.js:199 199: let a = "hello" * 5; ^^^^^^^ string. The operand of an arithmetic operation must be a number. Found 1 error
59. function timesTwo(x: number) { return x * 2; } function main() { timesTwo("hello"); }
60. ➜ formulae_react git:(master) ✗ flow status src/output_lib/decoders.js:203 203: timesTwo("hello"); ^^^^^^^ string. This type is incompatible with the expected param type of 198: function timesTwo(x: number) { ^^^^^^ number Found 1 error
61. TypeScript
62. Decoders
63. Encode // Decode
64. Convert at the boundaries
65. The boundary between Two Worlds
66. back-end <> front-end
67. const Person = { get: (name: string): Promise<PersonType> => { return api.get(`${name}`).then(resp => decodePersonType(resp.data)); } };
68. import { Record } from 'immutable' export default class PersonType extends Record({ name: '', age: 0, github: '' }) { name: string age: number github: string }
69. type ApiPerson = { name: string, age: number, github: string } decodePersonType(person: ApiPerson) : PersonType{ return new PersonType({ name: person.name, age: person.age, github: person.github }) }
70. All our code now uses our own types
71. You make the conversion between your server data and application data very explicitly.
72. Your app will now recognize weird JSON structures.
73. function decodeForm(data: ApiForm): FormType { // Decode the questions on their own const questions = List(data.questions.map(decodeQuestion)); return new FormType({ id: data.id, applicationId: data.application.id, completionContent: data.completion_content, sections: List( data.sections.map(section => { return decodeSection(section, questions); }) ), persisted: true }); }
74. function encodeForm(form: FormType): ApiForm { return { id: form.persisted ? form.id : undefined, application_id: form.applicationId, completion_content: form.completionContent, sections: form.sections.toArray().map(encodeSection), uuid: form.persisted ? undefined : form.id }; }
75. // @flow import { Record, List } from "immutable"; import SectionType from "./SectionType"; export default class FormType extends Record({ id: "", applicationId: "", sections: List(), completionContent: "", persisted: false }) { id: string; applicationId: string; sections: List<SectionType>; completionContent: string; persisted: boolean; }
76. type ApiForm = { id: number, application: ApiApplication, completion_content: string, sections: Array<ApiSection>, questions: Array<ApiQuestion> };
77. It adds one more validation phase in getting your data from your API
78. It turns server JSON into typed immutable records
79. ❤
80. Redux elm based architecture People are using Elm and never thought about that
82. import Html exposing (..) -- MODEL type alias Model = { ... } -- UPDATE type Msg = Reset | ... update : Msg -> Model -> Model update msg model = case msg of Reset -> ... ... -- VIEW view : Model -> Html Msg view model = ...
84. http://redux.js.org/docs/introduction/PriorArt.html
85. Redux First Router
86. Route State + Date State = ❤
87. ... const routesMap = { HOME: "/", // action <-> url path PRODUCT: "/product/:id" // :id is a dynamic segment }; ...
88. const productsReducer = (state = init(), action = {}) => { switch (action.type) { case "HOME": ... case "PRODUCT": ... ...
89. ... const mapDispatchToProps = dispatch => ({ goToProducts: id => dispatch({ type: "PRODUCT", payload: { id: id } }) }); ...
91. Stay tuned!
92. Questions? :)
93. References → https://www.dailydrip.com/ → https://www.dailydrip.com/topics/elm → https://www.dailydrip.com/blog/understanding- the-elm-architecture
94. References → https://www.dailydrip.com/blog/general-aspects- between-elm-and-js → http://slides.com/danielbachler/fearless- refactoring-with-elm#/ → http://elm-lang.org/blog/compilers-as-assistants → https://www.dailydrip.com/blog/using-decoders- in-your-api-the-boundary-between-two- worlds.html