This document provides an introduction to the Elm programming language. It discusses that Elm is a functional language for building web applications that compiles to JavaScript. Elm uses a type system that catches errors at compile time to avoid runtime exceptions. The document outlines Elm's architecture, which separates applications into models that represent application state, updates that modify the model, and views that output the model as HTML. It provides examples of building a counter application and fetching data from an API to demonstrate how to structure Elm code.
Introduction to the Elm programming language. Covers what Elm is, why it's worth learning and some some basics of the language. Also covers getting started with Elm and available resources.
The Unified Modeling Language (UML) is, of course, a modeling language. But there are now standard, executable semantics for a subset of UML (known as Foundational UML or fUML) and a standard language that provides a textual representation for this subset (the Action Language for fUML or Alf). Doesn’t this just make at least this subset of UML into a programming language?
Well, yes. After all, a programming language is really itself a modeling language for modellng computations that can actually be executed on computation hardware. In this view, all programs are models, but only some models, the executable models, are programs. Which means that an “executable modelling language” is, by definition, a programming language.
But is this a good thing? That is the question explored in this presentation, which argues that the answer is “yes”. And, moreover, UML as a programming language may, in fact, be important for moving forward in a number of, perhaps, unexpected areas, including agile development methods and programming for multi-core architectures.
Adapter Pattern is an example of some Demo implementations for OOP PHP Design Patterns in the Drupal 7 and Drupal 8 environments. Presentation at the Toronto Drupal Group
Introduction to the Elm programming language. Covers what Elm is, why it's worth learning and some some basics of the language. Also covers getting started with Elm and available resources.
The Unified Modeling Language (UML) is, of course, a modeling language. But there are now standard, executable semantics for a subset of UML (known as Foundational UML or fUML) and a standard language that provides a textual representation for this subset (the Action Language for fUML or Alf). Doesn’t this just make at least this subset of UML into a programming language?
Well, yes. After all, a programming language is really itself a modeling language for modellng computations that can actually be executed on computation hardware. In this view, all programs are models, but only some models, the executable models, are programs. Which means that an “executable modelling language” is, by definition, a programming language.
But is this a good thing? That is the question explored in this presentation, which argues that the answer is “yes”. And, moreover, UML as a programming language may, in fact, be important for moving forward in a number of, perhaps, unexpected areas, including agile development methods and programming for multi-core architectures.
Adapter Pattern is an example of some Demo implementations for OOP PHP Design Patterns in the Drupal 7 and Drupal 8 environments. Presentation at the Toronto Drupal Group
ALMOsT.js: an Agile Model to Model and Model to Text Transformation FrameworkCarlo Bernaschina
Model Driven Development (MDD) requires model-to-model and/or model-to-text transformations to produce application code from high level descriptions.
Creating such transformations is in itself a complex task, which requires mastering meta-modeling, ad hoc transformation languages, and custom development tools.
This paper presents ALMOsT.js, an agile, in-browser framework for the rapid prototyping of MDD transformations, which lowers the technical skills required for Web and mobile developers to start be proficient with modeling and code generation. ALMOsT.js is shown at work in the creation of IFMLedit.org, a browser-based, online/offline environment for the MDD specification and rapid prototyping of web and mobile applications.
Beyond JavaScript Frameworks: Writing Reliable Web Apps With Elm - Erik Wende...Codemotion
In times where a jungle of JavaScript frameworks wants to solve every conceivable problem in web app development, Elm offers a different approach. Elm is a functional language that compiles to JavaScript. It has a user-friendly compiler, a sound type system, built-in immutability and lots of other features that come in handy when developing large, hopefully bug-free, single-page apps. While having fun in the process! In this talk you'll see how Elm works and learn how to use it to build a web app. More importantly, you'll learn the pros and cons of using it over a JavaScript-based solution.
Eclipse DemoCamp Toulouse 2017 - Mr. Robot : The modeling Societymelbats
This talk was done at the Toulouse Eclipse DemoCamp. This talk presents the Eclipse modeling components: Xtext, EMF, Sirius, Acceleo. It shows also how to create textual and graphical editors based on those technologies to program a Lego Mindstorm.
Provides products to commercial organizations and government projects seeking to improve their application delivery and development timelines and resource load
MODEL DRIVEN ARCHITECTURE, CONTROL SYSTEMS AND ECLIPSEAnže Vodovnik
This paper describes the use of model driven architecture and its application in control system development. It also presents a prototype solution based on the Eclipse framework implemented by the author.
Anže Vodovnik, Klemen Žagar, Cosylab, Ljubljana, Slovenija
OptimJ is an extension of the Java programming language with language support for writing optimization
models and powerful abstractions for bulk data processing.
Standards-Based Executable UML: Today's Reality and Tomorrow's PromiseEd Seidewitz
This webinar demonstrates the practical realization of standards-based executable modeling in UML, showing its importance for moving forward in a number of, perhaps, unexpected areas, including agile development methods, multi-core programming and model-based system engineering. Today’s Executable UML is based on the OMG’s Foundational UML (fUML) standard, for executable object-oriented and activity modeling, and the Action Language for fUML (Alf) standard, which defines a corresponding textual representation. But this is only the beginning. Additional Executable UML standards are being built on this foundation, including recent ones for composite structure and state machines.
React is a different way to write JavaScript apps. When it was introduced at JSConf US in May, the audience was shocked by some of its design principles. One sarcastic tweet from an audience member ended up describing React’s philosophy quite accurately: https://twitter.com/cowboy/status/339858717451362304
We’re trying to push the limits of what’s possible on the web with React. My talk will start with a brief introduction to the framework, and then dive into three controversial topics: Throwing out the notion of templates and building views with JavaScript, “re-rendering” your entire application when your data changes, and a lightweight implementation of the DOM and events.
This article is about aspect oriented programming (aop) in spring. the related example of an application with aop support is in the following address :
https://github.com/ghorbanihamid/SpringBoot_AOP_JPA_Example
STATICMOCK : A Mock Object Framework for Compiled Languages ijseajournal
Mock object frameworks are very useful for creating unit tests. However, purely compiled languages lack robust frameworks for mock objects. The frameworks that do exist rely on inheritance, compiler directives, or linker manipulation. Such techniques limit the applicability of the existing frameworks, especially when
dealing with legacy code.
We present a tool, StaticMock, for creating mock objects in compiled languages. This tool uses source-tosource
compilation together with Aspect Oriented Programming to deliver a unique solution that does not rely on the previous, commonly used techniques. We evaluate the compile-time and run-time overhead incurred by this tool, and we demonstrate the effectiveness of the tool by showing that it can be applied to
new and existing code
Software development effort reduction with Co-oplbergmans
This talks explains the motivations for the Co-op technology: what are the challenges it addresses, in particular focusing on reducing accidental complexity, where it comes from, and a general vision on how to resolve it. Then we continue to show practical application of Co-op, including experience figures from large-scale application of a previous generation of this technology. Show a little bit about its realization, and conclude with an evaluation of the technology.
Check out the webinar slides to learn more about how XfilesPro transforms Salesforce document management by leveraging its world-class applications. For more details, please connect with sales@xfilespro.com
If you want to watch the on-demand webinar, please click here: https://www.xfilespro.com/webinars/salesforce-document-management-2-0-smarter-faster-better/
SOCRadar Research Team: Latest Activities of IntelBrokerSOCRadar
The European Union Agency for Law Enforcement Cooperation (Europol) has suffered an alleged data breach after a notorious threat actor claimed to have exfiltrated data from its systems. Infamous data leaker IntelBroker posted on the even more infamous BreachForums hacking forum, saying that Europol suffered a data breach this month.
The alleged breach affected Europol agencies CCSE, EC3, Europol Platform for Experts, Law Enforcement Forum, and SIRIUS. Infiltration of these entities can disrupt ongoing investigations and compromise sensitive intelligence shared among international law enforcement agencies.
However, this is neither the first nor the last activity of IntekBroker. We have compiled for you what happened in the last few days. To track such hacker activities on dark web sources like hacker forums, private Telegram channels, and other hidden platforms where cyber threats often originate, you can check SOCRadar’s Dark Web News.
Stay Informed on Threat Actors’ Activity on the Dark Web with SOCRadar!
More Related Content
Similar to Elm Detroit 9/7/17 - Planting Seeds with Elm
ALMOsT.js: an Agile Model to Model and Model to Text Transformation FrameworkCarlo Bernaschina
Model Driven Development (MDD) requires model-to-model and/or model-to-text transformations to produce application code from high level descriptions.
Creating such transformations is in itself a complex task, which requires mastering meta-modeling, ad hoc transformation languages, and custom development tools.
This paper presents ALMOsT.js, an agile, in-browser framework for the rapid prototyping of MDD transformations, which lowers the technical skills required for Web and mobile developers to start be proficient with modeling and code generation. ALMOsT.js is shown at work in the creation of IFMLedit.org, a browser-based, online/offline environment for the MDD specification and rapid prototyping of web and mobile applications.
Beyond JavaScript Frameworks: Writing Reliable Web Apps With Elm - Erik Wende...Codemotion
In times where a jungle of JavaScript frameworks wants to solve every conceivable problem in web app development, Elm offers a different approach. Elm is a functional language that compiles to JavaScript. It has a user-friendly compiler, a sound type system, built-in immutability and lots of other features that come in handy when developing large, hopefully bug-free, single-page apps. While having fun in the process! In this talk you'll see how Elm works and learn how to use it to build a web app. More importantly, you'll learn the pros and cons of using it over a JavaScript-based solution.
Eclipse DemoCamp Toulouse 2017 - Mr. Robot : The modeling Societymelbats
This talk was done at the Toulouse Eclipse DemoCamp. This talk presents the Eclipse modeling components: Xtext, EMF, Sirius, Acceleo. It shows also how to create textual and graphical editors based on those technologies to program a Lego Mindstorm.
Provides products to commercial organizations and government projects seeking to improve their application delivery and development timelines and resource load
MODEL DRIVEN ARCHITECTURE, CONTROL SYSTEMS AND ECLIPSEAnže Vodovnik
This paper describes the use of model driven architecture and its application in control system development. It also presents a prototype solution based on the Eclipse framework implemented by the author.
Anže Vodovnik, Klemen Žagar, Cosylab, Ljubljana, Slovenija
OptimJ is an extension of the Java programming language with language support for writing optimization
models and powerful abstractions for bulk data processing.
Standards-Based Executable UML: Today's Reality and Tomorrow's PromiseEd Seidewitz
This webinar demonstrates the practical realization of standards-based executable modeling in UML, showing its importance for moving forward in a number of, perhaps, unexpected areas, including agile development methods, multi-core programming and model-based system engineering. Today’s Executable UML is based on the OMG’s Foundational UML (fUML) standard, for executable object-oriented and activity modeling, and the Action Language for fUML (Alf) standard, which defines a corresponding textual representation. But this is only the beginning. Additional Executable UML standards are being built on this foundation, including recent ones for composite structure and state machines.
React is a different way to write JavaScript apps. When it was introduced at JSConf US in May, the audience was shocked by some of its design principles. One sarcastic tweet from an audience member ended up describing React’s philosophy quite accurately: https://twitter.com/cowboy/status/339858717451362304
We’re trying to push the limits of what’s possible on the web with React. My talk will start with a brief introduction to the framework, and then dive into three controversial topics: Throwing out the notion of templates and building views with JavaScript, “re-rendering” your entire application when your data changes, and a lightweight implementation of the DOM and events.
This article is about aspect oriented programming (aop) in spring. the related example of an application with aop support is in the following address :
https://github.com/ghorbanihamid/SpringBoot_AOP_JPA_Example
STATICMOCK : A Mock Object Framework for Compiled Languages ijseajournal
Mock object frameworks are very useful for creating unit tests. However, purely compiled languages lack robust frameworks for mock objects. The frameworks that do exist rely on inheritance, compiler directives, or linker manipulation. Such techniques limit the applicability of the existing frameworks, especially when
dealing with legacy code.
We present a tool, StaticMock, for creating mock objects in compiled languages. This tool uses source-tosource
compilation together with Aspect Oriented Programming to deliver a unique solution that does not rely on the previous, commonly used techniques. We evaluate the compile-time and run-time overhead incurred by this tool, and we demonstrate the effectiveness of the tool by showing that it can be applied to
new and existing code
Software development effort reduction with Co-oplbergmans
This talks explains the motivations for the Co-op technology: what are the challenges it addresses, in particular focusing on reducing accidental complexity, where it comes from, and a general vision on how to resolve it. Then we continue to show practical application of Co-op, including experience figures from large-scale application of a previous generation of this technology. Show a little bit about its realization, and conclude with an evaluation of the technology.
Similar to Elm Detroit 9/7/17 - Planting Seeds with Elm (20)
Check out the webinar slides to learn more about how XfilesPro transforms Salesforce document management by leveraging its world-class applications. For more details, please connect with sales@xfilespro.com
If you want to watch the on-demand webinar, please click here: https://www.xfilespro.com/webinars/salesforce-document-management-2-0-smarter-faster-better/
SOCRadar Research Team: Latest Activities of IntelBrokerSOCRadar
The European Union Agency for Law Enforcement Cooperation (Europol) has suffered an alleged data breach after a notorious threat actor claimed to have exfiltrated data from its systems. Infamous data leaker IntelBroker posted on the even more infamous BreachForums hacking forum, saying that Europol suffered a data breach this month.
The alleged breach affected Europol agencies CCSE, EC3, Europol Platform for Experts, Law Enforcement Forum, and SIRIUS. Infiltration of these entities can disrupt ongoing investigations and compromise sensitive intelligence shared among international law enforcement agencies.
However, this is neither the first nor the last activity of IntekBroker. We have compiled for you what happened in the last few days. To track such hacker activities on dark web sources like hacker forums, private Telegram channels, and other hidden platforms where cyber threats often originate, you can check SOCRadar’s Dark Web News.
Stay Informed on Threat Actors’ Activity on the Dark Web with SOCRadar!
Enhancing Research Orchestration Capabilities at ORNL.pdfGlobus
Cross-facility research orchestration comes with ever-changing constraints regarding the availability and suitability of various compute and data resources. In short, a flexible data and processing fabric is needed to enable the dynamic redirection of data and compute tasks throughout the lifecycle of an experiment. In this talk, we illustrate how we easily leveraged Globus services to instrument the ACE research testbed at the Oak Ridge Leadership Computing Facility with flexible data and task orchestration capabilities.
How to Position Your Globus Data Portal for Success Ten Good PracticesGlobus
Science gateways allow science and engineering communities to access shared data, software, computing services, and instruments. Science gateways have gained a lot of traction in the last twenty years, as evidenced by projects such as the Science Gateways Community Institute (SGCI) and the Center of Excellence on Science Gateways (SGX3) in the US, The Australian Research Data Commons (ARDC) and its platforms in Australia, and the projects around Virtual Research Environments in Europe. A few mature frameworks have evolved with their different strengths and foci and have been taken up by a larger community such as the Globus Data Portal, Hubzero, Tapis, and Galaxy. However, even when gateways are built on successful frameworks, they continue to face the challenges of ongoing maintenance costs and how to meet the ever-expanding needs of the community they serve with enhanced features. It is not uncommon that gateways with compelling use cases are nonetheless unable to get past the prototype phase and become a full production service, or if they do, they don't survive more than a couple of years. While there is no guaranteed pathway to success, it seems likely that for any gateway there is a need for a strong community and/or solid funding streams to create and sustain its success. With over twenty years of examples to draw from, this presentation goes into detail for ten factors common to successful and enduring gateways that effectively serve as best practices for any new or developing gateway.
Cyaniclab : Software Development Agency Portfolio.pdfCyanic lab
CyanicLab, an offshore custom software development company based in Sweden,India, Finland, is your go-to partner for startup development and innovative web design solutions. Our expert team specializes in crafting cutting-edge software tailored to meet the unique needs of startups and established enterprises alike. From conceptualization to execution, we offer comprehensive services including web and mobile app development, UI/UX design, and ongoing software maintenance. Ready to elevate your business? Contact CyanicLab today and let us propel your vision to success with our top-notch IT solutions.
Navigating the Metaverse: A Journey into Virtual Evolution"Donna Lenk
Join us for an exploration of the Metaverse's evolution, where innovation meets imagination. Discover new dimensions of virtual events, engage with thought-provoking discussions, and witness the transformative power of digital realms."
How Recreation Management Software Can Streamline Your Operations.pptxwottaspaceseo
Recreation management software streamlines operations by automating key tasks such as scheduling, registration, and payment processing, reducing manual workload and errors. It provides centralized management of facilities, classes, and events, ensuring efficient resource allocation and facility usage. The software offers user-friendly online portals for easy access to bookings and program information, enhancing customer experience. Real-time reporting and data analytics deliver insights into attendance and preferences, aiding in strategic decision-making. Additionally, effective communication tools keep participants and staff informed with timely updates. Overall, recreation management software enhances efficiency, improves service delivery, and boosts customer satisfaction.
Code reviews are vital for ensuring good code quality. They serve as one of our last lines of defense against bugs and subpar code reaching production.
Yet, they often turn into annoying tasks riddled with frustration, hostility, unclear feedback and lack of standards. How can we improve this crucial process?
In this session we will cover:
- The Art of Effective Code Reviews
- Streamlining the Review Process
- Elevating Reviews with Automated Tools
By the end of this presentation, you'll have the knowledge on how to organize and improve your code review proces
top nidhi software solution freedownloadvrstrong314
This presentation emphasizes the importance of data security and legal compliance for Nidhi companies in India. It highlights how online Nidhi software solutions, like Vector Nidhi Software, offer advanced features tailored to these needs. Key aspects include encryption, access controls, and audit trails to ensure data security. The software complies with regulatory guidelines from the MCA and RBI and adheres to Nidhi Rules, 2014. With customizable, user-friendly interfaces and real-time features, these Nidhi software solutions enhance efficiency, support growth, and provide exceptional member services. The presentation concludes with contact information for further inquiries.
Experience our free, in-depth three-part Tendenci Platform Corporate Membership Management workshop series! In Session 1 on May 14th, 2024, we began with an Introduction and Setup, mastering the configuration of your Corporate Membership Module settings to establish membership types, applications, and more. Then, on May 16th, 2024, in Session 2, we focused on binding individual members to a Corporate Membership and Corporate Reps, teaching you how to add individual members and assign Corporate Representatives to manage dues, renewals, and associated members. Finally, on May 28th, 2024, in Session 3, we covered questions and concerns, addressing any queries or issues you may have.
For more Tendenci AMS events, check out www.tendenci.com/events
Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...informapgpstrackings
Keep tabs on your field staff effortlessly with Informap Technology Centre LLC. Real-time tracking, task assignment, and smart features for efficient management. Request a live demo today!
For more details, visit us : https://informapuae.com/field-staff-tracking/
We describe the deployment and use of Globus Compute for remote computation. This content is aimed at researchers who wish to compute on remote resources using a unified programming interface, as well as system administrators who will deploy and operate Globus Compute services on their research computing infrastructure.
Globus Compute wth IRI Workflows - GlobusWorld 2024Globus
As part of the DOE Integrated Research Infrastructure (IRI) program, NERSC at Lawrence Berkeley National Lab and ALCF at Argonne National Lab are working closely with General Atomics on accelerating the computing requirements of the DIII-D experiment. As part of the work the team is investigating ways to speedup the time to solution for many different parts of the DIII-D workflow including how they run jobs on HPC systems. One of these routes is looking at Globus Compute as a way to replace the current method for managing tasks and we describe a brief proof of concept showing how Globus Compute could help to schedule jobs and be a tool to connect compute at different facilities.
Software Engineering, Software Consulting, Tech Lead.
Spring Boot, Spring Cloud, Spring Core, Spring JDBC, Spring Security,
Spring Transaction, Spring MVC,
Log4j, REST/SOAP WEB-SERVICES.
5. ElmDetroit–PlantingSeedswithElm
September7,2017 5
A beginner friendly language with a minimal but powerful set of
features
A quick and kind compiler that provides type inference
Advertises “No” runtime exceptions
An architecture designed for the language
Fully interoperable with JavaScript
Enforces semantic versioning
A helpful and friendly community
A really nice formatter that eliminates the need for a linter
What makes Elm special?
8. ElmDetroit–PlantingSeedswithElm
September7,2017 8
A note on type inference:
Type inference allows the compiler to “infer” the types in your app
without you explicitly defining them.
For instance, the following function definition examples are both
valid:
In spite of this, it’s a good practice to provide the type annotations
to improve readability and general code quality.
What makes Elm special?
or
9. ElmDetroit–PlantingSeedswithElm
September7,2017 9
A quick and kind compiler that provides type inference
There are a few helpful files here that may be useful to read before
you run into compiler errors:
https://github.com/elm-lang/elm-compiler/tree/master/hints
What makes Elm special?
10. ElmDetroit–PlantingSeedswithElm
September7,201710
Advertises “No” runtime exceptions
From the Elm website:
“Unlike hand-written JavaScript, Elm code does not produce runtime
exceptions in practice. Instead, Elm uses type inference to detect
problems during compilation and give friendly hints. This way
problems never make it to your users. NoRedInk has 80k+ lines of
Elm, and after more than a year in production, it still has not
produced a single runtime exception.”
This article has more insight on the subject:
http://elm-lang.org/blog/compilers-as-assistants
What makes Elm special?
11. ElmDetroit–PlantingSeedswithElm
September7,201711
Advertises “No” runtime exceptions
From personal and professional experience, I have experienced this firsthand.
Clarity has had 5 projects in production over the past 18 months and these stats still hold true.
What makes Elm special?
This article has more insight on the subject:
http://elm-lang.org/blog/compilers-as-assistants
13. ElmDetroit–PlantingSeedswithElm
September7,201713
The logic of every Elm program will break up into three cleanly
separated parts:
Model — the state of your application (a single state atom)
Update — a way to update your state
View — a way to view your state as HTML
The Elm Architecture
View
Model Update
18. ElmDetroit–PlantingSeedswithElm
September7,201718
This is a walkthrough of code I modified from the original HTTP
example from the Elm site:
https://ellie-app.com/4fgzBGyFzcYa1/0
Original example: http://elm-lang.org/examples/http
An example of The Elm Architecture
19. ElmDetroit–PlantingSeedswithElm
September7,201719
Elm uses modules as method to split up code
The code (..) exposes everything to the consuming module.
Consider exposed functions your “public” API for a module
Anything not exposed is “private” to the module.
Next, we move on to our application’s imports
A module system
20. ElmDetroit–PlantingSeedswithElm
September7,201720
The import statement tells the compiler that we want to bring something into our
module to use. An app without imports is extremely rare, as a matter of fact, even the
most basic “Hello, World!” example has an import:
For our application, we need to use some standard libraries (ex: Html*) as well as
some non-standard ones (ex: RemoteData) :
Similar to how module’s are defined, imports let us choose which functions to expose to
our application via the exposing keyword. Again (..) here means we’re bringing
everything the imported module expose into the local namespace. You can also alias
imported modules using the as keyword
A module system
21. ElmDetroit–PlantingSeedswithElm
September7,201721
Code that is similar to what you’ll see in most Elm applications:
The program’s execution will start in the main function and continue from there. Record value
assignment is done using the = operator (ex: init = init "cats") as in many
languages. Here we are passing in an initialization function for our program’s init to run upon
startup. This function should transform any inputs (in this case “cats”) into an initial state for
our application.
In our case, the init function does this by taking a String as an input
and emitting a (Model, Cmd Msg)
Setting up the application
22. ElmDetroit–PlantingSeedswithElm
September7,201722
More on the program module...
program is a function of the Html module in the Elm language core
(http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html). This module also
exposes a couple of other handy functions for starting a your program (as well as
others related to Html) that you may want to use based on what your application is
doing.
The main three types of programs exposed by the Html module are:
Html.beginnerProgram
Html.program
Html.programWithFlags
Setting up the application
23. ElmDetroit–PlantingSeedswithElm
September7,201723
Html.beginnerProgram can be used if your application does not have any
side effects that need to occur outside the input and Dom events. Basically, this
version of Program does not allow for adding asynchronous commands,
subscriptions etc. (this includes Tasks) input from DOM Events
Html.program can be used if your application needs access to run commands
or use subscriptions (this includes interop with JavaScript). Not every application
needs this but this is likely to be the most common version of Program used.
Html.programWithFlags allows for all of the functionality of Html.program but
can also consume inputs from the JavaScript environment at startup. Some
common uses are to pull values from localStorage upon loading the page.
Setting up the application
24. ElmDetroit–PlantingSeedswithElm
September7,201724
The Model in Elm is a single state atom of your application’s state. Here is the
Model for the example application:
This Model encompasses the entire “state” portion of my application. As seen in a
previous slide, the init function is used to setup the initial state of this Model
when the application starts.
A Model can pretty much be of any type, but as your application grows, most of
the time an Elm “Record” (http://elm-lang.org/docs/records) is the appropriate
storage mechanism for this state.
The Model
25. ElmDetroit–PlantingSeedswithElm
September7,201725
One of the features of Elm are it’s Union Types, these are sometimes called
“tagged unions” or “ADTs” in other languages.
A common use of Union Types in Elm is to setup the message structure for an
application. Below is example of how Union Types are used in the example
application:
More on Union Types can be found here:
https://guide.elm-lang.org/types/union_types.html
Union Types and modeling data
26. ElmDetroit–PlantingSeedswithElm
September7,201726
A more complex union type example:
Referenced from RemoteData package by Kris Jenkins:
http://package.elm-lang.org/packages/krisajenkins/remotedata/latest
Union Types and modeling data
27. ElmDetroit–PlantingSeedswithElm
September7,201727
As I’ve used Elm more, I’ve found that Union Types are effective way to model
pretty much anything. For instance, let’s say you have a toggle button and you
want to represent either on ”On” or “Off” state:
For something as simple as the last example, you could just use a value of type
Bool which, just so happens to be a union type itself.
But what’s nice is that, with the custom union type, you get more expressiveness
from the statement, which (generally) makes things easier to read.
Union Types and modeling data
29. ElmDetroit–PlantingSeedswithElm
September7,201729
Now that we’ve established that our Model holds the state for our entire application,
how to we update it? That’s where the update function comes into play.
Here is the update function for the example application:
The type definition for update implies that it takes two arguments a Msg and a
Model. It then emits a tuple in the form of (Model, Cmd Msg) based on those inputs.
Updating State
30. ElmDetroit–PlantingSeedswithElm
September7,201730
Updating State
In this case, pattern matching is being used to determine what should be returned by the update
function (how the model should change based on the current model) as well as any additional
commands that may need to be run based on the condition. This is a fairly standard thing to see
in an Elm update function
However, as an application scales, this section can grow and it may be beneficial to break out
some of the smaller blocks of execution into their own function (or even their own module)
Update the Model
Schedule a Cmd to be run upon the
next cycle of the Elm runtime
loop (after the View is rendered)
Update the Model
In this case, we don’t need to run
Any additional commands, just
process the response so we use
Cmd.none
31. ElmDetroit–PlantingSeedswithElm
September7,201731
Your applications View code defines what is displayed to the end user at any given time
A view can also be comprised of other functions that serve as sub views or partial views.
As with all Elm code, view is just a pure function and starts with a type and function definition
The type definition here says that this function takes in a Model and emits an Html Msg
The View
32. ElmDetroit–PlantingSeedswithElm
September7,201732
Elm has let statements which allow you to define variables that are local to the scope
between let and in.
In the code below, let..in is being used to assign multiple variables (ex: waitingGifUrl,
buttonText etc.) at once that will be used in the context below the in keyword.
The code(firstRun, gifUrl) uses destructuring to assign multiple variables at once based on the
case.
The View
33. ElmDetroit–PlantingSeedswithElm
September7,201733
Last, but not least, the code below the in keyword is used to declaratively state what should be displayed on
the page. Rather than using plain HTML here, Elm uses functions for everything (including HTML).
Most of the Html functions have the following type signature (h1 example):
The View
34. ElmDetroit–PlantingSeedswithElm
September7,201734
In order to fetch the data from a remote server, the example application has a function called getRandomGif.
This function is in charge of taking in a String as an input and emitting a Cmd Msg
An example of using the pipe-operator from the official site: http://elm-lang.org/examples/pipes/code
A simple Http request
A new Cmd is scheduled…
ImgResponse is the designated
message endpoint
Using the pipe-operators |> or <| one
can pass through the result to the next
function where it is used as the last
argument for the function it gets piped
into. The data can flow in both
directions, though the usual way of
chaining functions with the pipe operator
is using |> and having a single line per
function call.
35. ElmDetroit–PlantingSeedswithElm
September7,201735
When we schedule the Http request, one of the arguments we pass into the Http.get function is the
Decoder that should be used to parse the resultant JSON.
When we schedule the Http request, one of the arguments we pass into the Http.get function is the
Decoder that should be used to parse the resultant JSON.
In this case, we’re just using Decode.at to quickly extract only the data.image_url field from the JSON
data (shown below).
Decoding the data
36. ElmDetroit–PlantingSeedswithElm
September7,201736
Since everything in Elm is a function, we can easily cleanup our codebase as it grows. For instance, the
following three functions were originally part of the let..in block of my view code
As my code grew, it seems intuitive to break those out into their own bite sized chunks of code. This also lends
itself well to reuse.
Functions everywhere!
37. ElmDetroit–PlantingSeedswithElm
September7,201737
More on scaling and reuse in Elm:
From the official guide: https://guide.elm-lang.org/reuse/
An example of scalable SPA in Elm:
https://github.com/rtfeldman/elm-spa-example
Scaling and reuse
38. ElmDetroit–PlantingSeedswithElm
September7,201738
In Elm JavaScript interop is done through a pub/sub system called “Ports”. The notion of a Port is that it is a
pipe between Elm and JavaScript. The basic flow of ports is shown in the diagram below:
Reference article: https://hackernoon.com/how-elm-ports-work-with-a-picture-just-one-25144ba43cdd
Ports have either an inbound or an outbound flow. An example of an outbound port in Elm looks like the
following: port myOutboundPort: String -> Cmd msg
Here we are defining a port that sends one String argument to the native JavaScript code that it can use in
it’s function.
JavaScript Interop
39. ElmDetroit–PlantingSeedswithElm
September7,201739
We can schedule myOutboundPort to run at either startup of the application (in our init function) or in our
update function
Example of scheduling an outbound port to run upon startup:
Example of scheduling an outbound port to run at update:
JavaScript Interop
40. ElmDetroit–PlantingSeedswithElm
September7,201740
Inbound ports are handled via subscriptions. To listen for inbound messages, a subscription needs to be setup
(in our app the subscriptions function would handle this). We’ll jump into the subscription code on the next
slide.
For now, here is the syntax to setup an inbound port:
In the example above DataStore is a type with the same shape as the data we expect to come in. Let’s say
we are being sent the following JSON payload:
In this case, DataStore should be defined as follows:
JavaScript Interop
41. ElmDetroit–PlantingSeedswithElm
September7,201741
To subscribe (listen) for messages coming in on this port, we need to add a subscription to our
subscriptions function:
JavaScript Interop
When we receive messages from this
port the update function will be
called with ExecuteInboundPort
as the message
42. ElmDetroit–PlantingSeedswithElm
September7,201742
A few notes on subscriptions (Sub) and commands (Cmd) :
If you need to subscribe to multiple endpoints (Phoenix channels, Ports etc.), you can
use Sub.batch with a List of subscriptions rather than just listing one.
Similar to Sub.batch, Cmd.batch allows you to schedule multiple commands to run
There are other functions for working with subscriptions and commands, their respective
documentation pages are:
Subscriptions: http://package.elm-lang.org/packages/elm-lang/core/5.1.1/Platform-Sub
Commands: http://package.elm-lang.org/packages/elm-lang/core/5.1.1/Platform-Cmd
Commands and Subscriptions
44. ElmDetroit–PlantingSeedswithElm
September7,201744
Elm is a generally considered a very easy language to get started with. To get Elm installed,
you can visit https://guide.elm-lang.org/install.html and follow the directions.
Installers are available for Windows, Mac and Anywhere (via npm)
Language plugins are available for many popular editors and IDEs including Sublime, VS
Code, Atom and JetBrains (WebStorm etc.)
It’s highly recommended that you use elm-format to auto format code upon save (via a
watcher). Directions for install and setup are here: https://github.com/avh4/elm-format
Getting started with Elm
45. ElmDetroit–PlantingSeedswithElm
September7,201745
Elm is a compiled language and as uses a tool called “elm-make” to compile it’s code from Elm
to JavaScript.
One cool feature of the compiler is, by adding the –warn flag, you’ll be alerted to many to
unused imports. Similar to the normal compiler issues that cause a failure, these messages
are helpful and friendly.
Getting started with Elm
46. ElmDetroit–PlantingSeedswithElm
September7,201746
Examples from the official site: http://elm-lang.org/examples
The Official Guide: https://guide.elm-lang.org/
Ellie App (In browser editor): https://ellie-app.com/
Elm in Action (Book): https://www.manning.com/books/elm-in-action
Elm Town (Podcast): https://elmtown.github.io/
Awesome Elm (collection of resources and libraries): https://github.com/isRuslan/awesome-elm
Resources