Elm - Could this be the Future of Web Dev?
•
1 like•1,077 views
As a developer who enjoys building concurrent and distributed applications, dealing with the front end has never been a favorite task. And I have often thought that building front-end applications by mixing logic into HTML tags has never felt right. What if I could build my web app using a more unified language and approach? Well, enter Elm, a functional language that transpiles to JavaScript while providing static type checking. In this session, we'll take a look at what Elm provides, how its simple Model-Update-View architecture can bring a lot of power to your applications, and we'll walk through a simple SPA demo in order to provide you a taste of what Elm can provide. At the end of this session, you'll have a better understanding of Elm's approach to web application development and be equipped to build your own Elm applications.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Elm - Could this be the Future of Web Dev?
Similar to Elm - Could this be the Future of Web Dev? (20)
Recently uploaded
Recently uploaded (20)
Elm - Could this be the Future of Web Dev?
- 1. Elm COULD THIS BE THE FUTURE OF WEB DEVELOPMENT? DAVID HOERSTER @DAVIDHOERSTER
- 2. Disclaimer Although I work for Microsoft, the content in this session reflects my own views/opinions and not those of: Microsoft Any past or future employer
- 3. Talking Points Motivation Web Development Today Why Elm? The Good The Bad What’s Coming
- 4. My Background Controller Handler Domain Persistence Read Layer Handler Command/ EventTopics Read Model baseba ll gameC oordin ator gameI nfo-x gameI nfo-y player Superv isor batter- a batter- b batter- c c-01 c-11 c-32 CQRS Actor Model
- 6. Why Web Development? New side project Needed a front end to a ASP.NET Core backend Wanted something lightweight, yet powerful Reliable
- 7. Web Development Today Inconsistent development ecosystem Transpilers are OK, but mask issues with JavaScript ◦ Null / Undefined, Mutable global state, etc. Web Dev is unholy trinity of ◦ JavaScript ◦ CSS ◦ HTML
- 8. What If… …we could start over Would we want ◦ Consistent ecosystem vs Different contexts ◦ More reactive system or less ◦ Type checking vs Dynamic types ◦ Immutability as the norm vs. the exception ◦ No Nulls vs Null ◦ OO or FP or some mix of the two ◦ Performance, too!
- 9. What is Elm? Functional language for front-end development Compiled to JavaScript Statically typed Very opinionated architecture Immutable Message Based http://elm-lang.org/ 0.18
- 10. Benefits Consistent Context for Development Virtual DOM for Markup (and it’s fast!) No Shared Global State No Null/Undefined Message Based No Runtime Exceptions* JavaScript InterOp and Isolation Passionate and Helpful Community http://elm-lang.org/ 0.18
- 11. Hello Elm, 200 Level https://ellie-app.com/3qtb2QR8s6Ta1/1
- 12. Everything is a Function https://ellie-app.com/3qtCQXJdZ8La1/1 div, p, text, type_, class, button are all functions with signature: List (Html.Attribute msg) -> List (Html.Html msg) -> Html.Html
- 13. The Good – The Elm Architecture Model Update Model View MarkupInteraction (Msg) Model -> Update -> View
- 14. Communication is via Messages https://ellie-app.com/3qtPzKDNhpNa1/2 Wire up the app Initialize Model
- 15. Communication is via Messages Declare Messages Handle Messages (returns a new Model) https://ellie-app.com/3qtPzKDNhpNa1/2
- 16. Communication is via Messages https://ellie-app.com/3qtPzKDNhpNa1/2
- 17. Communication is via Messages
- 19. The Good – JavaScript InterOp Communication with native JavaScript via Messages Isolation of JavaScript from Elm Makes Elm more reliable! https://ellie-app.com/3qtPzKDNhpNa1/6
- 20. The Good – The Elm Architecture and InterOp Model Update Model View MarkupInteraction (Msg) JS / REST Subscription Port
- 21. The Good – JavaScript InterOp https://ellie-app.com/3qtPzKDNhpNa1/6
- 22. The Good – JavaScript InterOp Elm Update JavaScript https://ellie-app.com/3qtPzKDNhpNa1/6 New msg sent to Port
- 23. The Good – JavaScript InterOp Initial “Hit” message is processed, without any RBI Then, the “Rbi” message is sent in from JS
- 24. The Good – REST Calls
- 25. The Good – Helpful Compiler
- 26. Demo: DIY SPA in Elm
- 27. The Bad JSON Serialization/Deserialization JSON.NET or similar tools ‘spoil’ you Lots of hand wiring
- 28. The Bad DIY SPA Plumbing for: Routing SPA with no hashes
- 29. What’s Coming in 0.19 Asset Management ◦ Lazy Loading SPA support! ◦ Most of initial wiring up will be handled in 0.19
- 30. Web Development Future? Reactive Immutable Ability to Isolate Messaging
- 31. ?
- 32. Links Main Elm Site – https://elm-lang.org Elm Guide - https://guide.elm-lang.org/ Richard Feldman, Tour of an Elm SPA - https://dev.to/rtfeldman/tour-of-an-open-source-elm-spa Single-Page Web Apps in Elm (5 Part Series), Kevin Greene - https://www.linkedin.com/pulse/single-page-web-apps-elm-part-one-getting-started-new- kevin-greene Elm Tutorial - https://www.elm-tutorial.org/en/ Ellie (Elm Fiddle) - https://ellie-app.com Elm Package Repository - http://package.elm-lang.org/