A tour of Alt-JS languages

In this presentation, I talk about the 4 different alternatives to JavaScript that you can use today.

Transcript

1. A Tour of Alt-JS Languages
2. We help local businesses modernize they talk to their customers Hi, I'm Gage
3. Why Alt-JS? Why not … JS?
4. Testing JS, ~43% of developers don’t Why not? 1. Too hard ¯\_(ツ)_/¯ 2. Not a cultural norm
7. Default JS doesn’t make us all that happy... http://stateofjs.com/2017/
8. How do you Measure a Language?
9. That which is easy to do, we do more often. That which is easy to do, we do more often.
10. That which is easy to do, we do more often. That which is hard to do, we do less often.
11. Easy Hard
12. Easy Hard No Regret Regret
13. Easy Hard No Regret Regret
14. Easy Hard No Regret Regret Pitfalls Safeguards & Dark corners Necessary Evils 
 & Room for Improvement Productivity
15. Easy Hard No Regret Regret Null Refactoring Prototyping Prototypal inheritance Global Vars Exceptions FP Understanding Code Testing Cross-browser Immutability Mutability JSON Distribution Learning Perf Editor tooling Hiring Mentorship / Help Upgrade Packages Side-effects Type coercion Late binding “This” Long build time
16. How this Talk is Organized 1. What is it? 2. The good parts 3. The bad parts 4. Recommendations
17. Roadmap
18. Babel (ES6+) Basically compiles New version of JavaScript to Browser compatible version.
19. 42% Happiness Increase
20. Very popular, 77%
21. Babel, the Good Parts 1.It’s popular, everyone uses it 2.It’s a “thin” layer over real JavaScript 3.Has JSX built in 4.You can add any syntax you want! 5.Encourages you to use the good parts of JS
22. Babel, the Bad parts 1.No slouch but, not the fastest compiler. 2.No safety gained (requires linter / types on top if desired) 3.You can add any syntax you want (My “Babel” might not be your “Babel”)
23. Easy Hard No Regret Regret Null Refactoring Prototyping Global Vars Exceptions FP Understanding Code Testing Cross-browser Immutability Mutability JSON Distribution Learning Perf Editor tooling Hiring Mentorship / Help Upgrade Packages Side-effects Type coercion Late binding “This” Prototypal inheritance Long build time
24. Easy Hard No Regret Regret Null Refactoring Prototyping Global Vars Exceptions FP Understanding Code Testing Cross-browser Immutability Mutability JSON Learning Perf Editor tooling Hiring Mentorship / Help Upgrade Packages Side-effects Type coercion Late binding “This” Prototypal inheritance Long build time
25. Statically Typed Languages
26. Roadmap
27. TypeScript? • Basically just JS + Static Types • Made by Microsoft
28. What's Static Types?
29. Without static types
30. String + Number
31. What???
32. Add some types... and no longer possible!
33. Ok we'll allow null.... but wait
34. Ok we'll allow null, but now there's a problem
35. Weird behavior, but at least it's documented!
36. Ok... starting to regret that decision...let's change it back
37. Starting to regret that decision...how hard would it be to change?
40. The Top Competitors 3rd most popular
41. https://blog.logrocket.com/frontend-in-2017-the-important-parts-4548d085977f
42. TypeScript, the good parts • Very gradual typing, line by line even. Slowly enable safety features • Awesome auto-completion! (VSCode) • Very powerful type system, you can type any JS lib basically. • Lots of libraries and types for JS libs
43. TypeScript, the bad parts • Never know how “typed” a file is. • Nothing forces you to type your code • Types for JS libraries can easily go out of date. • Tempting to gradually un-type a file. • Setup is a lot of work. Lots of config options. • Decent amount of added verbosity • Most of the bad parts of JS still exist.
44. Easy Hard No Regret Regret Null Refactoring Prototyping Global Vars Exceptions FP Understanding Code Testing Immutability Mutability JSON Learning Perf Editor tooling Hiring Mentorship / Help Upgrade Packages Side-effects Type coercion Late binding “This” Prototypal inheritance Long build time Type coverage
45. Easy Hard No Regret Regret Null Refactoring Prototyping Global Vars Exceptions FP Understanding Code Testing Immutability Mutability JSON Distribution Learning Perf Editor tooling Hiring Mentorship / Help Upgrade Packages Side-effects Type coercion Late binding “This” Prototypal inheritance Long build time Type coverage
46. Language “Families”
47. ML-family languages C-style languages Elm ReasonML TypeScript
48. ML-family languages Elm ReasonML • Languages that share a common ancestor with ML (Meta Language) a language in the1973; 45 years ago.
49. What is an ML family language like? • Functional Programming all the way • Implicit Static Typing (Hindley–Milner) ◦ No NULL ◦ Way to express uncertainty in the types (ADTs) ◦ Almost no runtime exceptions • Pattern Matching
50. Null/ Undefined Errors
51. Roadmap
52. What is Elm? • Make by Evan Czaplicki about 6 Years ago • Tends to be the epitome of "If it compiles, it works!"
53. Elm, the Good Parts • No Runtime exceptions • 100% Pure Functions λ (easier to understand and test) • Framework built in • Semver enforced. ⛑ • Great Editor Tooling (Atom especially) • Time Traveling debugger 100% of the time ⏳
55. Elm is the Create- React-App of languages
57. Code Sample
58. Elm, the bad parts • Only the browser (no native apps easily) • Still need JS to do many things & JS interop is a bit verbose (will change over time) • Syntax will be new for most • SLOW compiler (fixed in next version)
59. Easy Hard No Regret Regret Null Refactoring Prototyping Global Vars Exceptions FP Understanding Code Testing Immutability Mutability JSON Distribution Learning Perf Editor tooling Hiring Mentorship / Help Upgrade Packages Side-effects Type coercion Late binding “This” Prototypal inheritance Long build time Type coverage
60. Easy Hard No Regret Regret Null Refactoring Prototyping Global Vars Exceptions FP Understanding Code Testing Immutability Mutability JSON Learning Perf Editor tooling Hiring Mentorship / Help Upgrade Packages Side-effects Type coercion No “This” Prototypal inheritance Long build time Type coverage
61. Roadmap
62. ReasonML
65. Compiles to native, byte-code and JS
66. Optimization
67. Optimization
68. Variant Types X, Y, Z is mutually exclusive. type role = | Teacher | Student; Struct types X, Y, Z must be together type person = { name: string, age: int };
69. Variant Types + Pattern Matching
70. Add another pattern...
71. Finds all the places that aren't handling "Parent"
72. ReasonReact • Redux style reducers built into components • Routing included • No need for prop-types because it's Reason • No need to `import React` or Components any more.
75. ReasonML, the good parts • You can do side effects if needed (speed or simplicity) • Use on backend and frontend! Share types! Native or Node • Backed and used by Facebook and the creator of React • Looks a lot like JavaScript, except everything is typed • Readable JS output
76. ReasonML, the bad parts • Library ecosystem is small ◦ (however it’s easy to write your own) • Community is still somewhat small ◦ (but growing rapidly) • Semantics a little different that JS, so a little more work to learn • Deep language
77. Facebook’s Messenger.com now 50%+ on ReasonML and saw an 80% decrease in bug tickets ReasonML Case Study
78. Easy Hard No Regret Regret Null Refactoring Prototyping Global Vars Exceptions FP Understanding Code Testing Immutability Mutability JSON Learning Perf Editor tooling Hiring Mentorship / Help Upgrade Packages Side-effects Type coercion No “This” Prototypal inheritance Long build time Type coverage
79. Easy Hard No Regret Regret Null Refactoring Prototyping Global Vars Exceptions FP Understanding Code Testing Immutability Mutability JSON Learning Perf Editor tooling Hiring Mentorship / Help Upgrade Packages Side-effects Type coercion No “This” Prototypal inheritance Long build time Type coverage Bad JS bindings
80. My Recommendations
81. Babel recommendations If you hate types and you're using plain JS, SWITCH NOW!
82. TypeScript recommendations • If you love Editor tooling, it's a great pick, however I would choose something else for safety
83. Elm recommendations • If all you're writing is a SPA and you aren't thinking about a ReactNative app, Elm's awesome! • I had difficulty getting people to get used to the syntax and we use React & ReactNative • Always worth learning because it can teach you to program without runtime exceptions. • Join the SLACK! They are amazing
84. ReasonML recommendations • It's the best way to use React, much better tooling, amazing pragmatic safety, possibly even compile your native apps to native "IRL". • Join the discord channel! This is the main place you get help. • Most tempting for us to adopt.
85. type questions = maybe(question) | sleep; @justgage everywhere