Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer
On Tuesday, October 11, 2016 at 11:21:05 AM UTC+1, Rupert Smith wrote: > > I'm interested in expanding on the counter example to add more complexity > - and I have a component in mind that will be useful to me - the listbox > that I was working with previously. > > The areas to add more complexity to are: > > More complex data on initialization - for example, passing a list of items > to init the list box with. This will be a List (String, String) in the Elm > application -> json array of string, string -> List (String, String) in the > Elm component. That is, just needs encoder/decoder written to handle it. > > More complex data on update - same as above really, provide a list of > selected items every time it changes. > > More complex internal state on the component - more options on the > component for things like max items to display before adding a scroll bar, > the scroll bar and scroll state itself. Ability to fetch the list of items > from the server, so I can configure a listbox like this href="http:/.../picklists/somelist">, and have the component manage the > request/response lifecycle itself. > I've pushed an update to the listbox to display an elm-mdl checkbox when items in the list are selected. It works nicely and I will re-use it many time accross my code. https://github.com/rupertlssmith/wood-polymer Scroll bars and multi-select/single-select are things that I may continue to add. I won't add the ability for it to fetch its contents through a REST API call, as that would be too restrictive, that will remain the responsibility of the consumer of the component. Other than that, I am going to pause on this elm+polymer exploration for a while, or until I feel the need to create some new and wonderful component that I have a pressing need for. I think elm+polymer could be taken in a number of directions: 1. Build some support into the Elm compiler for webcomponents. This would be a new 'program' type with support for hooking parts of the program state and events up to a webcomponent. The consuming program would also be able to link to it, in such a way that it can be given access to its 'public' state. This is really OO encapsulation, and as such might not be a popular idea within Elm. I only have a vague idea of what tighter integration would look like anyway, so far too early to start down this route. 2. Build a component library using Elm + minimal amount of Polymer. Overcoming restrictions previously discussed is generally going to necessitate more ports and more javascript. 3. Build components on top of polymer-paper elements in the MDL style. elm-mdl is ideal for this as both it and paper are built with MDL in mind. paper has a lot of javascript in it, but its well tested and designed and all useful. Many components built on top of it would just be Elm window dressing - to expose selected events on the component to the consumer. Some more sophisticated components could be built with more behaviour defined in Elm and so long as these work in a mostly declarative fashion, not requiring too much sharing of state between the consumer and the component, some nice stuff could be built. Having explored this in some depth I think 3 would be the way to do - although it does add to the overhead by pulling in more Polymer javascript. The reasons I say 3 are: already proved that Elm can work with Polymer nicely without needing to be changed, there is already something well tested and fairly comprehensive to build on top of, it is the direction in which progress could be made fastest, it requires the least 'native' code and number of ports to be workable. If anyone is up for working up some more Polymer+Elm components, I'm up for joining in the effort. -- You received this message because you are subscribed to the Google Groups "Elm Discuss" group. To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[elm-discuss] Re: Pure Elm contenteditable rich text editor
Just for the record, we discussed something similar here: https://groups.google.com/forum/#!msg/elm-discuss/YKz8rgffoWc/k6WIihXRBAAJ;context-place=forum/elm-discuss Le jeudi 13 octobre 2016 10:09:58 UTC+2, Bulat Shamsutdinov a écrit : > > Thank you everyone! I'm currently studying Draft.js to see their way of > implementing rich text edit. > -- You received this message because you are subscribed to the Google Groups "Elm Discuss" group. To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[elm-discuss] Re: Can I use css animations normally in elm?
I don't have any experience with this, but the TodoMVC example uses a tiny bit of CSS animations: See the '.todo-list li label' selector in 'style.css' at https://github.com/evancz/elm-todomvc -keith On Thursday, October 13, 2016 at 10:03:34 AM UTC-7, Timothy Williams wrote: > > Whenever I google something like this, I always get discussions about Elm > libraries for this. > > As someone new to css in general, I just want to be able to do normal css > animations using elm to model the state, do the event handling, and render > the html. > > For example, if the state is toggled in the model to that hides a menu, > can I use css to make that menu gradually disappear, as opposed to > suddenly, without using an elm library? > > Of course, I'm not referring to anything complex with canvas or svg, I can > see the appeal of writing svg or canvas code in elm. I just mean for plain > dom elements for a basic ui. > > Would this be the preferred approach? > > -- You received this message because you are subscribed to the Google Groups "Elm Discuss" group. To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[elm-discuss] Re: Can I use css animations normally in elm?
I have some experience in this, and for basic stuff you can use css. And it
keeps your elm code nicely focused on state, without complexity of having
to manage state transitions inside state.
e.g. for displaying and hiding a sidebar-menu which slides in from the
left, or a dropdown-menu, something like:
- have an menuIsOpen flag in your model,
- and in your view add a class "open" to your menu
- and in your css have something like this:
.sidebar {
position: absolute;
will-change: transform;
transform: translateX(-102%);
transition: transform 400ms;
}
.sidebar.open {
transform: translateX(0%);
}
.dropdown {
position: absolute;
opacity: 0;
will-change: opacity;
pointer-events: none;
transition: opacity 400ms;
}
.dropdown.open {
opacity: 1;
pointer-events: auto;
}
What happens here is that elm will render the new state, and after that,
css animation transitions to the new state on screen.
However, this only works for items that you can put/ which are in the DOM
both before and after the animation. And you cannot use "display: none" to
hide items (because css does not animate that). For more advanced
animations:
- Adding a new item to a list (typically the new item is not in the DOM
before it is added)
- Removing items from a list (the removed item is typically not rendered
after the removal).
- Functions or logic that should be available only after the transition
has completed. (e.g. first enlarge some square, and only afterwards display
contents of the square)
- Page transitions from one page to the next.
- Reversible animations: e.g. if the users clicks the "close" button
midway in the opening transition.
There are ways to get more done with css, but I always need more
elm-trickery too. I find that doing more complex animations fully in elm
gives me the most maintainable code.
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Re: [elm-discuss] Re: control structure
That's great to hear! Whenever I searched for this, I only found an old
elm-dev post where implementing it was still being talked about.
I haven't really needed to write recursive loops in Elm yet. But in F#,
I've written a few.
On Thursday, October 13, 2016 at 11:21:50 PM UTC-5, Joey Eremondi wrote:
>
> One current limitation of Elm is that there is no tail call elimination
>
>
> Like Janis says, this is not true, and in most cases, tail-recursive
> functions will become while-loops in the resulting JS.
>
> For example, consider a list-summing function:
>
> sum : List Int -> Int
> sum =
> let
> helper accum lst =
> case lst of
> [] -> accum
> (h :: t) -> helper (h + accum) t
> in
> helper 0
>
> This gets turned into the following JS in 0.18 (though TCO has been around
> for a few versions):
>
> var _user$project$Main$sum = function () {
> var helper = F2(
> function (accum, lst) {
> helper:
> while (true) {
> var _p0 = lst;
> if (_p0.ctor === '[]') {
> return accum;
> } else {
> var _v1 = _p0._0 + accum,
> _v2 = _p0._1;
> accum = _v1;
> lst = _v2;
> continue helper;
> }
> }
> });
> return helper(0);
> }();
>
>
>
> On Thu, Oct 13, 2016 at 9:10 PM, Janis Voigtländer > wrote:
>
>> Your statement about tail call elimination is wrong. The Elm compiler
>> does it.
>>
>> Am 13.10.2016 um 23:38 schrieb Kasey Speakman > >:
>>
>> It probably sounds insane that Elm doesn't have `for` or `while`. It
>> would to me before exposure to functional programming.
>>
>> There are prebuilt functions for working with collections like List
>> and
>> Array
>> which will take care of most needs.
>>
>> When you find you need something a bit more custom, a recursive loop is
>> the normal way. Those take a little practice to get the feel for them.
>>
>> Often when I write my own recursive loop, I later find that I can
>> accomplish the same by combining list operations or by just playing with
>> List.foldr.
>>
>> One current limitation of Elm is that there is no tail call elimination
>> when using a recursive loop, so if you write your own loop and have a large
>> list, you can get a stack overflow. In practice, this is not a typical
>> problem due to other factors. I.e. miles of data on the screen impacts
>> performance, and is not considered good UX.
>>
>> On Wednesday, October 12, 2016 at 5:52:31 AM UTC-5, Patricia Nicole
>> Benedicto wrote:
>>>
>>> hi can i ask what is the repetiton control structucture of this
>>> programming languages?
>>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "Elm Discuss" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to elm-discuss...@googlegroups.com .
>> For more options, visit https://groups.google.com/d/optout.
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "Elm Discuss" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to elm-discuss...@googlegroups.com .
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Re: [elm-discuss] Re: Integrating Elm with Web Components / Polymer
On Fri, Oct 14, 2016 at 1:35 PM, 'Rupert Smith' via Elm Discuss < elm-discuss@googlegroups.com> wrote: > 1. Build some support into the Elm compiler for webcomponents. > There could also be a direction where Elm compiler only implements support for Custom Elements. It would be awesome if someone more knowledgeble in JS could research what is the minimal amount of change needed to support that in a nice way. Ideally, it would be some library that would allow the implementation of the custom elements without ports or need for extra JS so that custom elements could be implemented and shared through the official package repository. This could simplify a lot of things, if taken in a 5 years perspective where Elm has even better tools take advantage of all the extra information that the language brings in order to create highly efficient deliverables. -- There is NO FATE, we are the creators. blog: http://damoc.ro/ -- You received this message because you are subscribed to the Google Groups "Elm Discuss" group. To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[elm-discuss] Re: Can I use css animations normally in elm?
Some repo to see this more advanced animations with CSS + Elm ?? -- You received this message because you are subscribed to the Google Groups "Elm Discuss" group. To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
Re: [elm-discuss] Re: Getting functions out of the model
On Oct 13, 2016, at 1:36 PM, Zinggi wrote: > > These are some very good points. > I don't see how a library that doesn't store functions in the model could > deal with these situations as easy as your library does. Right there may be the argument for why keeping functions out of the model while possibly useful as a guideline is likely to be a problem if applied as a more hard and fast rule. Mark -- You received this message because you are subscribed to the Google Groups "Elm Discuss" group. To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[elm-discuss] Another case of functions in the model
We have an app based on making multiple HTTP requests to a server for various pieces of information. All of these requests get implemented as tasks that more or less immediately become commands which then get routed via tagging functions as they flow up through the model. Pretty standard stuff. (I think in 0.18, we get to ignore the task aspect.) We're interested in exploring using web sockets or Phoenix channels as an alternative. Now, the request would go upstream on the socket with a tag (probably just a number) and the response would come back down bearing the same tag. To keep the same general style of coding as in the HTTP case, it seems like the best implementation would be to use the Requests-as-alternatives-to-Cmds approach. Rather than building a command directly, we would build requests that could be similarly mapped with routing functions as they propagated up through the model from update functions. At the top level, we would maintain a dictionary mapping request ID's to decode-and-route functions and turn the request itself into a command to post to the upstream channel. The listener on the socket would see the responses coming back and look in the dictionary for a corresponding entry. That all seems pretty straightforward. But note that the model now contains a dictionary of decode-and-route functions. Is there a solution that avoids this and doesn't gum things up significantly in other ways? Mark -- You received this message because you are subscribed to the Google Groups "Elm Discuss" group. To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
Re: [elm-discuss] Re: http "middleware" options
I think the requests-as-an-alternative-to-commands pattern would serve you here. (Sorry no link but there was a more detailed example a while back.) Basically, you create a type that parallels Cmd in that it supports batch and map functionality and you have it embody the notion of making HTTP requests. When the requests get to your service layer, they get turned into actual HTTP Cmds with the appropriate auth token attached. (Your request type should also allow wrapping normal Cmds so that you can pass those through as well.) This pattern essentially handles "middleware" as an outer wrapper on the model standing between your "real" model and the outside world. Mark -- You received this message because you are subscribed to the Google Groups "Elm Discuss" group. To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
Re: [elm-discuss] Re: http "middleware" options
Here is a quick example sketch of wrapping Http calls in request objects and delaying conversion to commands. Untested but it compiles. (The tricky part was handling the decoder since we need to bury the decoded type.) type alias HttpResult a = Result Http.Error a makeStringTagger : Json.Decode.Decoder a -> (HttpResult a -> msg) -> (HttpResult String -> msg) makeStringTagger decoder tagger = let stringDecoder = Json.Decode.decodeString decoder >> Result.formatError Http.UnexpectedPayload in \result -> Result.andThen result stringDecoder |> tagger type Request msg = Get String (HttpResult String -> msg) | Command (Cmd msg) | Batch (List (Request msg)) get : (Result Http.Error a -> msg) -> String -> Json.Decode.Decoder a -> Request msg get tagger url decoder = Get url (makeStringTagger decoder tagger) command : Cmd msg -> Request msg command = Command batch : List (Request msg) -> Request msg batch = Batch -- We need mapping support for Requests just like Cmds. map : (a -> b) -> Request a -> Request b map fn request = case request of Get url tagger -> Get url (tagger >> fn) Command cmd -> Command <| Cmd.map fn cmd Batch list -> Batch <| List.map (map fn) list -- At the service layer, we need to map back out to Cmds toCmd : Request msg -> Cmd msg toCmd request = case request of Get url tagger -> Http.getString url |> Task.toResult |> Task.map tagger |> Task.perform (Debug.crash "never fail") identity Command cmd -> cmd Batch list -> Cmd.batch <| List.map toCmd list Mark On Fri, Oct 14, 2016 at 4:17 PM, Mark Hamburg wrote: > I think the requests-as-an-alternative-to-commands pattern would serve > you here. (Sorry no link but there was a more detailed example a while > back.) > > Basically, you create a type that parallels Cmd in that it supports batch > and map functionality and you have it embody the notion of making HTTP > requests. When the requests get to your service layer, they get turned into > actual HTTP Cmds with the appropriate auth token attached. (Your request > type should also allow wrapping normal Cmds so that you can pass those > through as well.) > > This pattern essentially handles "middleware" as an outer wrapper on the > model standing between your "real" model and the outside world. > > Mark > > -- You received this message because you are subscribed to the Google Groups "Elm Discuss" group. To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
Re: Element continuity (was Re: [elm-discuss] Re: Html.Keyed)
Actually, the existing documentation for Html.Keyed comes close to saying what needs to be said: > Works just like Html.node, but you add a unique identifier to each child > node. You want this when you have a list of nodes that is changing: adding > nodes, removing nodes, etc. In these cases, the unique identifiers help make > the DOM modifications more efficient. In addition to make the modifications more efficient, it makes them more correct because it avoids having positional shifts cause confusion. Basic rule: If the set of children for an Html node can change, then you should use Html.Keyed for that node to avoid problems with DOM element state or focus. Side note: Do not reuse keys under a node if you don't want state preserved. (That's the issue that started the parent thread.) Mark -- You received this message because you are subscribed to the Google Groups "Elm Discuss" group. To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
