Functional frontend with React and pure JavaScript / ClojureScript

Two experienced developers and speakers will share their experiences with FP using Facebook's highly popular React.js. August Lilleaas, famous for his Clojure and ZeroMQ ventures and popular JavaZone talks, will show us React in pure JS while Christian Johansen, the author of Test-Driven JS Development and (co-)author of Buster and Sinon, will show us React used via the ClojureScript wrapper Om.

Pizza and drinks will be served 18:45 - 19. (Normal & vegetarian; let us know in advance if you would like to have a gluten-free one as well.)

A. Lilleaas: Advanced Facebook React
------------------------------------------
Facebook React is a JavaScript library for building user interfaces. It is completely different from AngularJS, Backbone, Ember, and the others. We'll look at building some concrete user interfaces with Facebook React, and try to reflect the challenges we face when we're building actual user interfaces at work (no "build a todo list in 15 minutes"). I've used AngularJS a lot, so we'll also look at some cases that compares AngularJS and Facebook React so we can learn what their benefits and tradeoffs are.

React is also relevant to us functional programmers, since it's architected in a very functional way. Essentially, you return your UI as a value, instead of doing fancy partial updates yourself to improve performance.

We'll also look at building a single page web app using React that also renders your UI from the server, without any code duplication. So your site works without JS enabled, is crawled by search engines, and gets content rendered immediately on mobile without having to wait for JS to download and run.

C. Johansen: Functional UI programming
---------------------------------------------

Over the past few years, many libraries, tools and languages have been made available to make the benefits of functional programming more easily accessible to the frontend programmer. Until recently though, the UI programming - DOM manipulation and various abstractions over it, has been entangled in stateful, messy and buggy APIs.

Facebook's React offers a refreshing take on UI programming in the browser, allowing us to model our UIs with data. Couple this with immutable data structures, and all the other Clojure goodness in Clojurescript, and the stage is set for wonderful functional UI programming. In this talk, I will show some examples of UI programming in Clojurescript with Om (one of the available React wrappers in Clojurescript) and a sprinkling of core.async for event handling.

---
Each talk will take approximately 45 min.

Join or login to comment.

  • Christian J.

    Takk for hyggelig kveld og ikke minst, hyggelige tilbakemeldinger.

    Carl-Erik: Jeg valgte å gå litt kjapt gjennom en del av tingene for å komme i mål med noe - tanken var å inspirere :) Men, ja, det burde vært noen linker.

    REPL-et var Austin: https://github.com/cemerick/austin

    Det er litt knotete å sette opp, men veldig kult når det funker. Ellers er det litt roligere tempo og mer forklaing på mange av de samme tingene på http://zombieclj.no, men alt er ikke ute enda.

    Laget et sample-repo av REPL-configen fra i går: https://github.com/cjohansen/austin-repl-example

    2 · April 29

  • Jakub H.

    Also, if you missed the meetup, make sure to check out Christian and Magnar's http://www.zombieclj.no/ - Clojure[Script], React, different ClojureScript react wrappers, zombies, games

    April 29

  • Jakub H.

    My take aways from the meetup:
    1) Working with DOM is pain and slow, especially many small updates; the difference between handling inital page load (render all) and the later small changes is annoying
    2) AngularJS solves many of the problems; you only change your data and it updates DOM for you, also handling initial load x changes. But it has its own problems - it performs poorly for larger data sets (f.ex. 200 people) so you end up changing DOM manually anyway and it has no abstractions/hooks for you to change its behavior
    3) React solves most/all problems of Angular by taking a very different approach, maintaining a virtual DOM and computing changes to real DOM based on old/new virt. DOM diff. It is only the V in MVC. It provides hooks,abstractions.
    4) Immutable data structures of ClojureScript make the hardest task fo React - v.DOM diffing - trivial => fast
    5) Om also adds state management (change atom => relevant components update autom.)
    --
    Comments,clarifications?

    2 · April 29

  • Carl-Erik K.

    Skulle gjerne sett noen lenker til hvordan CJ hooket opp serversiden til framsia. Akkurat i den biten var det litt uklart hvilken kode som kjørte hvor. Ellers to veldig interessante presentasjoner.

    April 29

  • Inaam S.

    Very interesting

    April 29

  • Magnus R.

    Nice combo of birds-eye with pure js and some hardcore om clojure/(script) with a drizzle of core.async. Very enjoyable and inspiring evening. Tx to August, Christian and Oslo Socially Functional.

    April 28

  • Jakub H.

    Thanks a lot to our wonderful speakers August and Christian from Kodemaker and to Iterate for sponsoring the food! This was really great.
    Side note: We are always looking for interesting presenters and generous food sponsors :-)

    April 28

  • Jakub H.

    Please update your RSVP latest by 16:00 if you are not coming so that we can adjust the amount of food we order. Thank you!
    (We do not want to throw food away while elsewhere people are starving, do we?)

    April 28

  • Jakub H.

    FYI: Pizza and drinks will be served 18:45 - 19 - normal & 1 vegetarian; let us know in advance if you would like to have a gluten-free one as well.

    1 · April 22

People in this
Meetup are also in:

Create a Meetup Group and meet new people

Get started Learn more
Bill

I started the group because there wasn't any other type of group like this. I've met some great folks in the group who have become close friends and have also met some amazing business owners.

Bill, started New York City Gay Craft Beer Lovers

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy