These are chat archives for jdubray/sam

11th
Sep 2017
Rob Siera
@robsiera
Sep 11 2017 03:18
@foxdonut really enjoyed watching all you screencasts on Meiosis. Nice work!
I second @formido 's question: Where would nap go in your fundamental example of Meiosis?
devin ivy
@devinivy
Sep 11 2017 03:30
i believe it would be somewhere near computed()
Janne Siera
@jannesiera
Sep 11 2017 10:30
@pfurini Aurelia promised an export-to-web-components option. But that project seems not to have had any changes for 2 years and asking around about it I got no response.
Paolo Furini
@pfurini
Sep 11 2017 10:41
That's another problem.. I'm not using Aurelia anymore, and if I'd stop using angular also, my second option will be plain js or another lightweight approach
I wanted to share my thoughts on angular as opposed to Aurelia. Based on my past experience with the latter, Angular seems to be more convoluted when achieving the same goals
Janne Siera
@jannesiera
Sep 11 2017 10:46
@pfurini and I tend to agree with you.
Jean-Jacques Dubray
@jdubray
Sep 11 2017 10:52
Angular is so verbose, each time you need to do something, it's like getting dressed to go to a wedding every morning. You wonder sometimes how these things get designed. I understand that Front-End is a very difficult problem to crack to I am probably missing something.
Even though pretty much everyone mock my ES6 Template Literal approach, I have never found anything that beat it. JSX is close, but still.
Victor Noël
@victornoel
Sep 11 2017 11:06
I don't know which kind of applications you all do, but personally, I like everything that angular give me to ease my work. Yes it is verbose, but I need a router, I need a set of visual components that are coherent (material) and that provide sidebars, dialog and stuffs like this, I need easily pluggable modules that behave as expected because they were made for this framework, etc. See http://linagora.gitlab.io/petals-cockpit/ for a demo of what I'm building and tell me if it is so easy with something like ES6 templates alone and doing everything in an ad-hoc way… !
(I'm not talking about SAM or not SAM, I'm pretty sure it would be a win if I was using the SAM pattern fully in this app)
angular gives me a framework with which I can express what I want without worrying that everything is coherent, because it will be following the architectural principles and patterns enforced by this framework.
Paolo Furini
@pfurini
Sep 11 2017 11:11
@victornoel Even though the same things you mentioned are provided by Aurelia or other lightweight frameworks as well, but with less friction.. I simply use Angular because of its traction in the market, and because I started developing in ionic for a living, otherwise I'd have chosen a competitor (or stayed with Aurelia)
Victor Noël
@victornoel
Sep 11 2017 11:11
@pfurini I don't know aurelia, in what way it is lightweight?
Paolo Furini
@pfurini
Sep 11 2017 11:14
Less ceremonies to do the same things, but the list is too deep.. There should be some independent comparisons out there, dunno if they are updated though
But keep in mind that Aurelia author Rob Eisenberg, was the lead developer behind the major innovations in Angular 2, and he leaved because the project (Angular) were taking an approach that he judged too bloated. So he started Aurelia, with all the innovations planned for Angular
Victor Noël
@victornoel
Sep 11 2017 11:38
ok, interesting :) thanks
Fred Daoud
@foxdonut
Sep 11 2017 12:11
@formido @robsiera thank you for the kind words!
I am currently preparing for going to Web Unleashed and present Meiosis. It is currently not scheduled to be recorded, in that case I hope to do a screencast equivalent of the presentation and post it on the Meiosis wiki.
As for nap(), as @devinivy mentioned, I would probably do a .map on the stream of models and attach a nap function there. So far I have not come across many use cases for nap myself.
@formido @robsiera side note, I would have replied earlier but gitter did not notify me of the @ mention :disappointed:
Michael Terry
@formido
Sep 11 2017 16:23
@foxdonut thanks, no problem
in my current app I used nap right off, although perhaps with meiosis I would not have needed it, not sure
but in my case I needed to set an error message in my top level react component and then after that was set, call signout on my firebase instance
so react needed to rerender to set the new state before I could call signout, which I did in nap
Fred Daoud
@foxdonut
Sep 11 2017 17:14
@formido right, with Meiosis you might solve the problem with a different approach.
Janne Siera
@jannesiera
Sep 11 2017 17:44
@foxdonut how would you solve it with Meiosis? Also, what is meiosis based off? Trial and error, TLA+, ... ?
Fred Daoud
@foxdonut
Sep 11 2017 17:49
@jannesiera hehe, of course not trial and error. What precisely do you mean by "it"?
Janne Siera
@jannesiera
Sep 11 2017 18:49

@foxdonut the use case of the error message/firebase shutdown that @formido brought up where he needed NAP. How would you solve that with Meiosis?

I'm wondering what's at the basis of Meiosis. For SAM I can trace it down easily: SAM -> TLA+ -> State Machines -> Mathematics

Flux/Redux I can somewhat place in context by React's history and design goals.
So what is it for Meiosis?
Fred Daoud
@foxdonut
Sep 11 2017 19:21

@jannesiera from the description I don't have much to go on. It might look something like this:

update(model => {
  model.errorMessage = "...";
  return model;
});
firebaseInstance.signout();

As for the basis of Meiosis. I don't have a formal definition as is the case with SAM.
It's a matter of having a simple reactive loop: model -> view=function(model) -> render view -> update model -> re-render view.
The essence of the pattern is, for model updates, having an update function and passing functions to update.
From the pattern, it is possible -- but not required -- to achieve certains goals: more details under Meiosis Goals on the Wiki.

devin ivy
@devinivy
Sep 11 2017 19:26
you could definitely wire nap() in there. it's part of the state (in SAM terms), which in those videos is essentially computed(). you'd just need to make sure you understand what's going to happen with your streams if you fire another action while scanning. i don't know what flyd does there.
meiosis and SAM are good teammates, but meiosis doesn't hand you SAM out of the box. the relationship between them is that meiosis would lead you to wire-up SAM in a certain way.
@foxdonut one use of nap that i like is for the application to allow itself to respond to there being "missing" data. for example, if a record in the store is referenced by id but doesn't exist in the store, nap() is a natural place to put the code that allows the store to "detect" that and fetch the missing record.
Jean-Jacques Dubray
@jdubray
Sep 11 2017 19:37

apologies for such a basic question, I was wondering if someone could give me a hand. I have been trying to put a react sample project (based on @foxdonut minimalist suggestion) and I can't get seem to be able to pass the webpack hurdle.
Here is the error:

ERROR in ./html/components/theme.jsx
Module build failed: SyntaxError: Unexpected token (17:12)

  15 |         items = items || [] ;
  16 |         return (
> 17 |             <div>
     |             ^
  18 |                     <p>menu</p>
  19 |             </div>
  20 |         )

 @ ./html/app.jsx 19:13-46
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! jessie@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the jessie@1.0.0 build script.

here is my webpack config file

var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './html/app.jsx',
    module: {
        loaders: [
            {
                test: /\.jsx$/,
                loader: 'babel-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
        ]
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
};
devin ivy
@devinivy
Sep 11 2017 19:40
i think it might be that you're missing the react preset for babel-loader
Fred Daoud
@foxdonut
Sep 11 2017 19:47
@jdubray try adding this to your .babelrc file:
{
  "presets": ["env"],
  "plugins": [
    ["transform-react-jsx"]
  ]
}
also if not already done:
npm i -D babel-preset-env react-jsx
@devinivy good point, you could definitely wire up nap() to Meiosis.
Jean-Jacques Dubray
@jdubray
Sep 11 2017 19:50
yes that was it, thank you so much!!
Fred Daoud
@foxdonut
Sep 11 2017 19:52
:thumbsup:
Jean-Jacques Dubray
@jdubray
Sep 11 2017 22:27
I have an even more trivial question, I get this error: bundle.js:22767 Uncaught ReferenceError: React is not defined
react and react-dom are both in my dependencies and devDependencies
` "react": "^15.6.1", "react-dom": "^15.6.1",
And my app.jsx code looks like this
 import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';

 import {state}       from './sam/state.js' ; 
 import {model}       from './sam/model.js' ;
 import {actions}     from './sam/actions.js' ;
 import {view}        from './sam/view.js' ;

 // application specific
 import {theme}       from './components/theme.jsx' ;

 // theme = t

 // initial model, from file
 import {data}           from './components/model.data.js'

 // initial model, from server
 // import {data}           from '../app/v1/model.js' 

 var display = function(representation) {

     ReactDOM.render(representation, document.getElementById('header-representation')) 

 }
I don't use React anywhere else, or so it seems
Jean-Jacques Dubray
@jdubray
Sep 11 2017 22:34
It looks like Webpack does not include it in bundle.js, you have to add to your regular includes:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js"></script>
in index.html
Now, it's working though I get this joke like error: react-dom.js:17245 Uncaught TypeError: Cannot read property '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined at Object.133 (react-dom.js:17245)
Michael Terry
@formido
Sep 11 2017 22:38
@jdubray why not use create-react-app?
Jean-Jacques Dubray
@jdubray
Sep 11 2017 22:41
I am a "hands on guy" :smile:
Michael Terry
@formido
Sep 11 2017 22:42
good reason then :)
Jean-Jacques Dubray
@jdubray
Sep 11 2017 22:42
I was just trying to adapt my standard sample to see how far I would have to go into the react ecosystem. I'd like to use as little as I can to implement V = f(M)
works great so far