Surface: A bridge to the Javascript community

Surface — @davydog187

Who am I - Dave Lucia

  • VP, Engineering at Simplebet 🏀 ⚾ 🏈
  • Elixirin' since 2016 💪
Surface — @davydog187

Coming to Elixir

Surface — @davydog187

Talk

  1. The roots of Javascript
  2. The emergence of LiveView
  3. Surface
Surface — @davydog187

Javascript - the early years

Surface — @davydog187

JQuery

Surface — @davydog187

Javascript Frameworks - Early 2010s

  • Backbone.js
  • Ember
  • Angular
Surface — @davydog187

Javascript Frameworks - Templates

  • Mustache
  • Handlebars
  • Directives in HTML (Angular)
Surface — @davydog187

Single Page Applications

Surface — @davydog187

Javascript Mid 2010s - Virtual DOM

Surface — @davydog187

Javascript in the Browser - Mid 2010s

  • React / Vue
  • Elm
  • Svelte
Surface — @davydog187

BLV - Before Live View

  • Server-rendered HTML 💪
  • React & Vue.js
Surface — @davydog187

BLV - A lot of people still build apps this way

  • Great for many usecases
  • If you have a frontend heavy app, this may still be your goto route
Surface — @davydog187

Announcment of LiveView

  • Fundamentally changed the way that interactive web applications could be built
Surface — @davydog187

Write once, use everywhere

Surface — @davydog187

Challenges of building JS apps

Surface — @davydog187

Managing state on both frontend and backend

  • Redux
  • Mobx
  • Hooks
  • Elm architecture
  • ???
Surface — @davydog187

Managing the toolchains

Surface — @davydog187

Testing two codebases

Surface — @davydog187

LiveView cut out all of the crap

  • Unlocked a new pathway for quickly building many classes of applications
  • Changed the way that we write internal tools at Simplebet
  • Throw some stuff in a Phoenix LiveView + PubSub, now you've got a Live, interfactive web Page
  • Holy shit is it powerful
Surface — @davydog187

At Simplebet, LiveView has changed the way we build our operational tools. :shh: it's our secret weapon

Surface — @davydog187

I started craving something out of LiveView

  • Somethign that I've seen before...
  • What I experienced working within the Javascript community for so long
Surface — @davydog187

A new project emerges

  • In Spring of 2021, we had an ambitious, greenfield project
  • I knew we could do it in LiveView, but LiveView was missing some of the things I really wanted
Surface — @davydog187

What LiveView was missing

  • Truly reusable components
  • Static prop annotations
  • Compile-time checks to enforce valid HTML
Surface — @davydog187

Enter Surface

  • Remember hearing about Surface, but never understood what value it was bringing over LiveView
  • Clearly, I was missing a lot
Surface — @davydog187

Surface enhances LiveView by taking a decade+ worth of learnings from the Javascript community

Surface — @davydog187

Let's compare Surface to the latest and greatest Javascript frameworks

Surface — @davydog187

Compile-time HTML validations

Surface — @davydog187

Template specific DSLs that is tailored to the domain

Surface — @davydog187

Ok, but we just got HEEX!

Surface — @davydog187

HEEX vs Surface templates

  • heex only went halfway
  • It's a great improvement over just string interpolation
  • Introduces structured data into the templates
  • Missing many of the fundamental improvments
Surface — @davydog187

Surface++ - Conditional classes

Surface — @davydog187

Surface++ - Slots

Surface — @davydog187

Surface++ - Dynamic Components

Surface — @davydog187

Surface++ - Declaritive props and data

  • React now recommends Flow/Typescript to introduce types
  • Before this they had a concept of PropTypes for annotating props
  • Surface offers something in the middle
Surface — @davydog187

Surface++ - Self-Documenting via Surface Catalogue

Surface — @davydog187

Surface++ - Examples and Playground

Surface — @davydog187

Surface++ - Community Component Libraries

  • DaisyUI
  • UIKit
  • Bulma
  • Bootstrap
Surface — @davydog187

Surface++ - Investment in tooling

  • mix surface.format
  • mix surface.convert
Surface — @davydog187

Surface++ - Bootstrapping a project

Surface — @davydog187

Surface - What lies ahead?

  • Further enhancements to template language
    • Computed properties
    • TKTKTK ask Marlus - That thing from Adobe flex?
  • Visual Regression Testing
Surface — @davydog187

Why Surface is important

  • Bringing back its best ideas back to LiveView
  • Testing ground for new ideas
  • Can make optimizations, tools, and langugage features that LiveView can't offer
Surface — @davydog187

But it comes back to the community

Surface — @davydog187

Let's usher in a new era of Elixir developers

  • LiveView + Surface can attract Javascript developers who are looking for more
Surface — @davydog187

What LiveView + Surface can offer Javascript developers

  • Stability (in the API sense)
  • Reliability
  • Scale
Surface — @davydog187

Thank you

Surface — @davydog187

* While many come to Elixir from Ruby, I came from Javascript * have a memory of what it was like living in the Node.js ecosystem * I see some parallels with the experience I had in the JS community with what's happening right now with LiveView

Show a picture of a stupid 2000s style javascript page

* JQuery was solving the problem of havign a good cross-browser experience, simplifying Apis * Introduced simplified ways of doing AJAX * This created a boon in interactive web applications

As developers started seeing the power of client driven development, they wanted frameworks for structuring code We start to see the emergence of Javascript frameworks

And here is where the Single Page Application emerges in the ecosystem

Leap of innovation! Write "declarative code", the library/framework understands how to patch the DOM based on changes Sea-change how frontend applications were written.

Maybe even mention Bloomberg Brisket for fun

Describe building apps before live view. Usually using sockets/channels + some Javascript framework. Possibly React/Vue or even Elm <!

Insert meme about node_modules

Now you have to test your Javascript code too to prevent regressions. Maybe you pull in Wallaby and do browser-based integration testing, but regardless, at a certain level of complexity, you're thinking about writing two fundamentally different classes of tests for your frotneds

Compare JSX, and whatever Vue uses, maybe Svelte

Show of Marlus's new work of using Sourceror to bootstrap a Surface project