These are chat archives for jdubray/sam

13th
Nov 2017
Jean-Jacques Dubray
@jdubray
Nov 13 2017 01:24
@pfurini I appreciate the effort to share information on GoLang, but it seems a bit far from what I want to work on. It's really hard for me to invest time on it, but please feel free to continue sharing.
Jean-Jacques Dubray
@jdubray
Nov 13 2017 03:48
Really excited to announce that I ported the startboostrap blog to lit-html. I was able to create a generic <state-representation> web component that can work with any SAM-based application.
devin ivy
@devinivy
Nov 13 2017 03:52
@jdubray so lit-html ended up working out for you! :) glad!
i don't see any code in there yet, but look forward to checking it out. curious what you came-up with for a state representation component... i built one over a year or two ago that was probably too polymer-specific.
Jean-Jacques Dubray
@jdubray
Nov 13 2017 03:57
sorry, having trouble to check it in
I really really like lit-html thank you!
devin ivy
@devinivy
Nov 13 2017 04:00
when i came across it i realized pretty quickly that it belonged in here :) cheers! :beers:
Jean-Jacques Dubray
@jdubray
Nov 13 2017 04:00
yes, I guess that was the last hurdle to #UseThePlatform

Here is the generic state representation component:

class Renderer extends HTMLElement {

            render(representation) {
                // Render state representation
                if (!this.needsRender) {
                    this.needsRender = true;
                    Promise.resolve().then(() => {
                        this.needsRender = false;
                        render(representation, this);
                    });
                }
            }

          }


          let sr = window.customElements.get('state-representation') 
          if (!sr) {
            window.customElements.define('state-representation', Renderer)      
          }

After that I just add an html tag in front of my template literals (with repeat and unsafeHTML when needed) and that's it, the SAM loop runs 100% unchanged, proving one more time that the business logic is 100% decouple from the view.

Jean-Jacques Dubray
@jdubray
Nov 13 2017 04:08
It's checked in everything is in index.html and theme.js
Had a blast at the offline camp!
Jean-Jacques Dubray
@jdubray
Nov 13 2017 04:46
Paolo Furini
@pfurini
Nov 13 2017 08:15
@jdubray great work with lit-html, whilst I'm always concerned on browsers compatibility .. no doubt lit-html is the latest and greatest in its kind, but I'll go with something more supported if can't get lit-html work with all evergreen browsers
Paolo Furini
@pfurini
Nov 13 2017 08:20
re golang, I'm not trying to convince you or others using it, I'm not currently use it either! 😉 was only pointing out that some of the more innovative cloud/network related components out there are being written in go .. (and THAT specific one is very useful for a quick reverse proxy solution, in containerized micro services stacks, without the burden of bigger solutions)
Jean-Jacques Dubray
@jdubray
Nov 13 2017 13:50
:+1:
Quick summary of Offline Camp:
  • data replication is hard
  • PouchDB/CouchDB helps build offline first applications, with a rock solid data replication implementation
  • If you want to build PouchDB/CouchDB based apps, you should look into hood.ie and spiegel
  • AppCache is dead
  • ServiceWorker is coming together but not there yet
  • An Offline First SAM Sample is coming next
Jean-Jacques Dubray
@jdubray
Nov 13 2017 13:56
To keep on your radar:
devin ivy
@devinivy
Nov 13 2017 13:57
how is appcache dead before serviceworker is done? :P
YES to dat and scuttlebutt. been following dominic tarr and max odgen almost as long as i've been into node. i love that so much of the offline software (even non-web) is written in js.
Jean-Jacques Dubray
@jdubray
Nov 13 2017 13:59
Cool stuff:
  • mastodone
  • Beaker
  • peer-to-peer webRTC is coming (and mesh networks too...)
Paolo Furini
@pfurini
Nov 13 2017 13:59
I spoke to one of my partners about offline first mobile apps/PWAs for their data-centric backends.. but the boss said it's too difficult to do it well when most of the lookup data cannot easily fit a mobile client cache.. I wasn't able to reply
Jean-Jacques Dubray
@jdubray
Nov 13 2017 13:59
@pfurini it's not easy for sure, but it's coming
Fred Daoud
@foxdonut
Nov 13 2017 14:00
@jdubray cool stuff, thanks for sharing! :thumbsup:
Jean-Jacques Dubray
@jdubray
Nov 13 2017 14:00
@devinivy I think we'll be at the level of AppCache momentarily, I am just saying, take Service-Worker seriously.
devin ivy
@devinivy
Nov 13 2017 14:01
yesyes, that makes sense. i wish we knew what apple is going to implement on service workers.
for example, will they enable push notifications on iOS?
or is it all about application caching?
Jean-Jacques Dubray
@jdubray
Nov 13 2017 14:01
There is a W3C spec and Apple is committed to implement it, that being said W3C politics will always be there
devin ivy
@devinivy
Nov 13 2017 14:02
the spec doesn't really specify what the background process can be used for, e.g. push notifications on android.
Jean-Jacques Dubray
@jdubray
Nov 13 2017 14:02
We had the representative of Microsoft and IBM from, they just flew in Friday from the W3C meeting, so the news are direct and fresh
Paolo Furini
@pfurini
Nov 13 2017 14:02
But how to deal with large lookup data sets, like for example if a user wants to find if a customer with some name already exists, and there are millions of rows..? I wasn't able to reply to these kind of objections
Jean-Jacques Dubray
@jdubray
Nov 13 2017 14:03
@pfurini that will never be possible...
devin ivy
@devinivy
Nov 13 2017 14:03
@foxdonut have you played with lit-html yet? curious what your thoughts are.
Jean-Jacques Dubray
@jdubray
Nov 13 2017 14:03
That being said, the sample I am planning to build will be using PouchDB to store the model and a regular database for everything else.
devin ivy
@devinivy
Nov 13 2017 14:04
@pfurini look at the relationship between couchdb and pouchdb– it may help illustrate.
Jean-Jacques Dubray
@jdubray
Nov 13 2017 14:04
@pfurini currently you can only use PouchDB with a per-user shard (I mean for serious applications).
Paolo Furini
@pfurini
Nov 13 2017 14:05
@jdubray yeah I think that only solutions currently are sharding and eventual consistency of the offline models when going online again (with conflict resolution)
Jean-Jacques Dubray
@jdubray
Nov 13 2017 14:06
@pfurini CouchDB is working on enabling partial replications but it's some months away.
Paolo Furini
@pfurini
Nov 13 2017 14:06
For the latter I'd like to see some real world examples if you can share some post/repo links.. thx 😉
I mean for offline/online reconciliation and conflict resolution
Jean-Jacques Dubray
@jdubray
Nov 13 2017 14:08
For me the key requirement beyond flaky connections (and occasional offline events) is to enable cross-device replication. I can see how I start an activity on my phone and I can continue that activity with any device without ever losing context. That's what I plan to build.
conflict resolution seems to be good enough right now.
@pfurini you should look at hood.ie
devin ivy
@devinivy
Nov 13 2017 14:09
was there any talk of gundb at offline camp @jdubray ?
Fred Daoud
@foxdonut
Nov 13 2017 14:10
@devinivy I tried a really simple example and the on-click refused to fire. Of course it's probably my fault but I didn't dig deeper after the failed attempt. Also, I'm with @pfurini in that it's not production ready and doesn't yet have much compatibility.
That being said, for my purposes the most important thing is to have a render function that can efficiently re-render the top-level view, and that the view be written with JS (not template-based) so that loops, conditionals, partials etc. are just regular JS code.
Side note, JSX, I know people like or dislike it, but it does have a nice advantage of being an abstraction over the underlying virtual-DOM library. In this Meiosis setup example I have 10 virtual-DOM libraries but just one version of the application code, which uses JSX to render the view. Switching from one virtual-DOM library to another does not involve changing application code, just one file that does the setup for the library in just a handful of lines of code.
Jean-Jacques Dubray
@jdubray
Nov 13 2017 14:10
noo.... this was a CouchDB group, I mentioned gundb but it looked like a dirty word unfortunately.
@foxdonut @devinivy I don't use events that useless. There is absolutely no need to.
Paolo Furini
@pfurini
Nov 13 2017 14:13
@jdubray I'll look into hood.ie for sure, but for taking inspiration.. that partner uses Python exclusively, and I myself do not use node on the server (and any plans to use it anymore 😬 )
Fred Daoud
@foxdonut
Nov 13 2017 14:13
@jdubray I'm sorry, what? Not sure what you meant there.
Jean-Jacques Dubray
@jdubray
Nov 13 2017 14:39
@foxdonut there is no need to use the lit-html event handler binding mechanism, in the code sample you'll see that the event handler definitions are part of the template literal:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
        ${repeat(params.header.menu, 
           (i) => i.href, 
           (item, index) => html`<li id="menu-item-${index+1}"><a id="${item.href}" href="#" onclick="return setMenuItem({menuItem:'${item.href}'});">${item.label}</a></li>` 
        )}
    </ul>
 </div>
setMenuItem is considered to be an intent which is bound to an action:
components.actions.forEach(function(action) {
        intent(action.name, function(data, present) {
            return action.implementation(data, present, model) 
        })
    })
Fred Daoud
@foxdonut
Nov 13 2017 14:57
@jdubray I see. What I dislike about this approach:
  • intent is a global function
  • every action name, setMenuItem etc. becomes a global function
  • components are not self-contained, relying on globals
Jean-Jacques Dubray
@jdubray
Nov 13 2017 15:52
I agree with the first two points, otherwise, components are self contained, they don't know where they are mounted.
Fred Daoud
@foxdonut
Nov 13 2017 15:57
Perhaps we have a different definition of self-contained. You can't create a function and pass everything needed by the component. Components won't work without globals which are defined elsewhere. So, they are not self-contained.
Jean-Jacques Dubray
@jdubray
Nov 13 2017 15:59
I can mount these components in any application they make no assumption about any other parts of the system. In this sample the view is hard coded to the components, but that's easy to create a level of indirection.
Fred Daoud
@foxdonut
Nov 13 2017 16:03
Add the end of the day all of your onclick="...." will need global variables, and that has some disadvantages.
Paolo Furini
@pfurini
Nov 13 2017 16:06
to me self-contained component means: no external lib dependency whatsoever (a build phase will produce one js file and that's it, like stencil does), runtime dependencies are explicit (DI via construction phase)
Jean-Jacques Dubray
@jdubray
Nov 13 2017 16:07
@pfurini yes, that's my understanding too
Fred Daoud
@foxdonut
Nov 13 2017 16:09
@pfurini does relying on a global variable meet your requirements?
Paolo Furini
@pfurini
Nov 13 2017 16:09
@foxdonut absolutely not
Paolo Furini
@pfurini
Nov 13 2017 16:16
every component must work as a black box, with an internal SAM driver that is hidden from the user of the component itself. The fact that it uses a reactive UI pattern will not be hidden, but the component should expose and document public read-only properties that are changed as part of a state function run, and expose public methods used to trigger permitted intents
Paolo Furini
@pfurini
Nov 13 2017 16:28
I'm not sure about the implications, I need to do some experiments myself and didn't had a chance yet.. but essentially I'd like to have components that:
  • use SAM internally to ensure consistent state management, especially for complex ones
  • are self-contained, without external dependencies of any kind (by default)
  • work in all evergreen browsers, with embedded polyfills (that's why my attention primarily resides on stencil)
  • can accept "optional" lib dependencies at runtime, for example for supporting an offline driver (so develop an open interface, and if you want for example add support for CouchDB or whatever, just write an adapter for it, and inject it at component init time)
  • fully embrace DI by construction (no complex automated DI libs, but if one really wants to, can write a small proxy around the component for the automatic DI injection)
  • do not prescribe using SAM in the host too, but expose some additional interface to ease the integration of the internal SAM driver with the host's one
Paolo Furini
@pfurini
Nov 13 2017 16:34
the above is from the standpoint of a component developer, not app developer.. I mean, as a component developer I'd like to reuse much of my efforts by being able to target the broader range of platforms (by "platform" I refer both hosts like browsers, and target frameworks)