Wed 6 Aug 2014 7:06PM

webdpack example

EP elf Pavlik Public Seen by 53

moving from another thread, copy:

Maybe sharing simple example I played with can help with avoiding drifting into black holes ;)

If it will sound confusing, I plan to record short screencast and already have sequence diagram for it which can make it clearer. I made 4 very simple elements:

webfingerd simply helps to discover my profile page from my email address, so having [email protected] it will return https://wwelves.org/perpetual-tripper (or any other URL I want)

webprofiled serves my Linked Data profile, currently supporting RDFa and JSON-LD
to see graph embeded in RDFa just copy source of https://wwelves.org/perpetual-tripper/ and paste into http://rdfa.info/play/
to see JSON-LD one can use simple Content-Negotiation, in terminal: $ curl https://wwelves.org/perpetual-tripper/ -H “Accept: application/ld+json” BTW HTML page with RDFa gets generated from that JSON-LD currently with mustache but I plan to yank out part of http://viejs.org to do it in nicer way

webserviced offers for now just login/logout with Mozilla Persona and discovery of Linked Data profile location via webfinger

webfingerd, webprofiled, webserviced all do http://enable-cors.org/

greeting-app just provides super basic SPA to interact with webserviced. for now I can login from browser javascript console with “navigator.id.request()”
then it sends it to webprofiled (easily hosted on different domain than one which serves greeting-app). once i do persona dance webservice will get from webfingered URL to my webpage powered by webprofiled and then get data in JSON-LD. after that it sends it to greeting-app which greets me with my name and avatar.

let’s imagine now that we replace webserviced with loomio backend and greeting-app with loomio frontend. this way i can just click ‘Login with Persona’ and it will greet me my name, avatar, know my current location, languages i speak, whatever i decide to publish in my independent homepage, in my case powered by webprofiled but someone else can just write it with text editor, use Drupal, Wordpress whatever :)

Once front end connects to CORS aware services, it can for example send my posts and comments, at the same time to my Personal Data Space and to instance(s) of loomio backend. It may make less sense for discourse type of features, but if I want to offer a rideshare or couch, nowadays I can’t easily post it to http://blablacar.com , http://carpooling.com, http://liftshare.com etc. I also can’t use my favorite trip planner app but need to deal with different human (graphical) interface to interact with ‘different’ services which in practice offer exactly the same functionality. Lately I find the last issue of big importance, imagine if you would need to use the same email client that your friend uses to receive a message (hell no!) relevant links here: http://decoupledcms.org/ & http://hydra-cg.com/

IMO having common vocabularies to express concepts we interact with ( http://schema.org & http://lov.okfn.org ) as well as common ways of specifying what interaction we can have with those resources (http://schema.org/Action & http://hydra-cg.com ) gives us nice foundation for building systems which can interoperate :)

BTW I would encourage technical folks to join http://www.w3.org/wiki/Socialwg and less technical ones to join: http://www.w3.org/wiki/Socialig

I hope this post didn’t run to long or got to confusing…


elf Pavlik Wed 6 Aug 2014 7:07PM

@bobhaugen http://bit.ly/1sd6cVk
once i setup live demo i'll add proper URIs for requests + record screencast


Bob Haugen Wed 6 Aug 2014 7:16PM

@elfpavlik - thanks for the diagram. Forgive my ignorance, but I did not get the webdpack thing...?


Bob Haugen Wed 6 Aug 2014 7:40PM

@elfpavlik - Wait a minute: what is this StackEdit magic? You created a gist in github using markdown and StackEdit presented it as a sequence diagram?
Looks like they are out of beta:
Love at first sight! I need to get out more...


Bob Haugen Wed 6 Aug 2014 7:41PM

@lynnfoster - Elf moved the discussion of that stuff he has been working on over here...I know you liked it.


elf Pavlik Wed 6 Aug 2014 7:45PM

please forgive me cryptic names ;)

lately i like to distinguish between:

  • human interfaces (frontends) which run on local devices (in most cases with graphical interface), which i call apps
  • processes running most of the time remotely (but can also run locally) which don't provide human interaction interface but only APIs (backends), i call them daemons

while nowadays many system couple single frontend (app) with single backend (daemon), i like to have possibility of connecting from single app to multiple daemons, CORS comes handy here for web browser based apps. at the same time i want that each of those daemon (backends) allows interaction from all kind of apps (frontends). Similar like with email, everyone can use different client and participate in mailing lists hosted on any number of servers.

i used similar approach while experimenting with: http://dspace.elevate.at/

in my example you have single app: greeting-app and 3 daemons (not counting Persona IdP), here it gets more confusing since i use multiple sets of daemons to construct various backends, terminology - work in progress!

to give you another example i played with lately, i replaced greeting-app with my fork of http://mdwiki.info (app) and extended webserviced into etherwiki

we want to edit content served with mdwiki using etherpad, so we have 2 apps:

  • mdwiki fork
  • etherpad frontend

and few daemons:

  • etherwiki (extended webserviced)
  • etherpad backend
  • webprofiled + webfingered (+ optional persona IDP) -- such set of 2 (or 3) deamons, can come as a bundle deployed independently even for each person, if we want to go really indie and everyone hosts one's own identity

interaction happens in following way:

  1. mdwiki (fork) provides interface for the wiki, each page has additional edit button
  2. once i click edit, it
    • makes request to etherwiki from new tab
    • etherwiki creates new etherpad (on some ep-lite backend) and pushes content there
    • etherwiki redirects this new tab to etherpad frontend (ATM served by the same remote ep-lite) with newly created pad
    • etherwiki subscribes to changes in etherpad
    • mdwiki (fork) subscribes to etherwiki to also get those updates and show preview of content rendered to markdown

this way each participant can have two tabs one with etherpad for editing and second with mdwiki for preview

#TODO sequence diagram for that + screencast with demo!


elf Pavlik Wed 6 Aug 2014 7:52PM

@bobhaugen kudos for discovering and using StackEdit go to @jonrichter , we did this diagram while he explained me how it works :)


Bob Haugen Wed 6 Aug 2014 7:57PM

@jonrichter - not https://stackedit.io/ ?
But I still love it!


Bob Haugen Wed 6 Aug 2014 10:30PM

@jonrichter - searching thru https://github.com/almereyda?tab=repositories for the source for this magic...?

On another tangent, found this: https://github.com/almereyda/Open-Kanban

Sorta in our ballpark. But we want kanbans in software.


Josef Davies-Coates Thu 7 Aug 2014 10:21AM

@bobhaugen I searched for stackedit github and this was top https://github.com/benweet/stackedit - is that what you are looking for? :)

btw, I don't think any of them are open, but have you seen https://waffle.io/ https://www.zenhub.io/ https://huboard.com/ - they all make trello-like kanban boards out of your github repository which is pretty nice.

(https://waffle.io/ is being used by this Open App lot and I just found the other two trying to find that again! :P)

Load More