Integration PureScript and Halogen into JavaScript Applications

Transcript

1. Integrating PureScript and Halogen into JavaScript Applications Hardy Jones
2. Who am I?
3. Who am I? • Programming for 5 years
4. Who am I? • Programming for 5 years • Former SlamData Employee
5. Who am I? • Programming for 5 years • Former SlamData Employee • Current NoRedInk Employee
6. Who am I? • Programming for 5 years • Former SlamData Employee • Current NoRedInk Employee • @st58 on twitter, joneshf everywhere else
7. JavaScript Refresher
8. JavaScript Refresher • ES2015 syntax
9. JavaScript Refresher • ES2015 syntax ◦ Arrow functions
10. JavaScript Refresher • ES2015 syntax ◦ Arrow functions ◦ Destructuring objects
11. JavaScript Refresher • ES2015 syntax ◦ Arrow functions ◦ Destructuring objects ◦ Import/Export statements
12. JavaScript Refresher • ES2015 syntax ◦ Arrow functions ◦ Destructuring objects ◦ Import/Export statements • Callbacks
13. React
14. React • Library that helps you build UIs better
15. React • Library that helps you build UIs better • Introduced JSX syntax
16. Let’s play with react • https://github.com/reactjs/redux • git clone git@github.com:reactjs/redux.git • Look at examples/shopping-cart
17. Tasks 1. Change the heading to something else. E.g. “The Best Shopping Cart!!”
18. Tasks 1. Change the heading to something else. E.g. “The Best Shopping Cart!!” 2. Make an alert appear when you click “Checkout”
19. Redux • Library that helps you manage state
20. Redux • Library that helps you manage state • Independent of React, but often used together
21. Redux • Library that helps you manage state • Independent of React, but often used together • Let’s play with Redux!
22. Tasks 1. Add a button that resets the products 2. Add a button that buys the rest of a product’s inventory
23. PureScript
24. PureScript • Strongly typed
25. PureScript • Strongly typed • Statically typed
26. PureScript • Strongly typed • Statically typed • Compiles to JavaScript
27. PureScript • Strongly typed • Statically typed • Compiles to JavaScript ◦ Many other languages as well
28. PureScript • Strongly typed • Statically typed • Compiles to JavaScript ◦ Many other languages as well • Purity enforced
29. PureScript • Strongly typed • Statically typed • Compiles to JavaScript ◦ Many other languages as well • Purity enforced • Immutable values
30. PureScript • Strongly typed • Statically typed • Compiles to JavaScript ◦ Many other languages as well • Purity enforced • Immutable values • Let’s play with PureScript!
31. PureScript • npm install -D purescript pulp bower
32. PureScript • npm install -D purescript pulp bower • Add a script: “bower”: “bower”
33. PureScript • npm install -D purescript pulp bower • Add a script: “bower”: “bower” • Add a script: “pulp psci”: “pulp psci”
34. PureScript • npm install -D purescript pulp bower • Add a script: “bower”: “bower” • Add a script: “pulp psci”: “pulp psci” • npm run bower -- install -S purescript-prelude purescript-console
35. PureScript • npm install -D purescript pulp bower • Add a script: “bower”: “bower” • Add a script: “pulp psci”: “pulp psci” • npm run bower -- install -S purescript-prelude purescript-console • npm run bower -- install -D purescript-psci-support
36. PureScript • npm run pulp-psci
37. PureScript • npm run pulp-psci • import Prelude
38. Compiling to JS
39. Compiling to JS • Add a script “pulp-build”: “pulp --watch build --build-path src/purs”
40. Compiling to JS • Add a script “pulp-build”: “pulp --watch build --build-path src/purs” • npm run pulp-build
41. Compiling to JS • Add a script “pulp-build”: “pulp --watch build --build-path src/purs” • npm run pulp-build • Let’s format the string in PureScript and use it in JavaScript!
42. Tasks 1. Create a module “Product.purs” in src
43. Tasks 1. Create a module “Product.purs” in src 2. Implement “format”
44. Tasks 1. Create a module “Product.purs” in src 2. Implement “format” 3. Use “format” from “Product.js”
45. Tasks 1. Create a module “Product.purs” in src 2. Implement “format” 3. Use “format” from “Product.js” 4. Make a JS friendly “format” a. npm run bower -- install -S purescript-functions
46. Eff
47. Eff • A data type that lets you communicate which “effects” a procedure needs
48. Eff • A data type that lets you communicate which “effects” a procedure needs • Not executable from within PureScript*
49. Eff • A data type that lets you communicate which “effects” a procedure needs • Not executable from within PureScript* • Under the hood, it’s a nullary function that runs a procedure
50. Eff • A data type that lets you communicate which “effects” a procedure needs • Not executable from within PureScript* • Under the hood, it’s a nullary function that runs a procedure • Let’s use Eff from JavaScript!
51. Tasks 1. Implement “logPrice” in “Product.purs”
52. Tasks 1. Implement “logPrice” in “Product.purs” 2. Use “logPrice” from “Product.js”
53. Types
54. Types • Primitive
55. Types • Primitive • Record
56. Types • Primitive • Record • Tagged Union
57. Types • Primitive • Record • Tagged Union • Type alias
58. Types • Primitive • Record • Tagged Union • Type alias • Newtype
59. Types • Primitive • Record • Tagged Union • Type alias • Newtype • Polymorphic
60. Halogen
61. Halogen • Library that helps you build UIs better
62. Halogen • Library that helps you build UIs better • Self-contained components
63. Halogen • Library that helps you build UIs better • Self-contained components • State is manged by a “query algebra”
64. Halogen • Library that helps you build UIs better • Self-contained components • State is manged by a “query algebra” ◦ Actions change state
65. Halogen • Library that helps you build UIs better • Self-contained components • State is manged by a “query algebra” ◦ Actions change state ◦ Requests provide information (may also change state)
66. Halogen • Library that helps you build UIs better • Self-contained components • State is manged by a “query algebra” ◦ Actions change state ◦ Requests provide information (may also change state) • Let’s play with Halogen!
67. Tasks
68. Tasks 1. Implement “product” in Halogen a. npm run bower -- install -S purescript-halogen
69. Tasks 1. Implement “product” in Halogen a. npm run bower -- install -S purescript-halogen 2. Implement a Halogen runner in JavaScript
70. Review
71. Review 1. React
72. Review 1. React 2. Redux
73. Review 1. React 2. Redux 3. PureScript
74. Review 1. React 2. Redux 3. PureScript 4. Using PureScript from JavaScript
75. Review 1. React 2. Redux 3. PureScript 4. Using PureScript from JavaScript 5. Eff
76. Review 1. React 2. Redux 3. PureScript 4. Using PureScript from JavaScript 5. Eff 6. Types
77. Review 1. React 2. Redux 3. PureScript 4. Using PureScript from JavaScript 5. Eff 6. Types 7. Halogen
78. Review 1. React 2. Redux 3. PureScript 4. Using PureScript from JavaScript 5. Eff 6. Types 7. Halogen 8. Using Halogen from JavaScript
79. Thanks