Intro to Preact

@jenlooper

Who am I?

Jen Looper

Senior Developer Advocate, Progress

@jenlooper

Who are you?

mobile developer?
web developer?

tinkerer? 

magic bean-buyer?

JavaScript Fatigue

Angular

• not to be confused with Angular.js
• a framework to build web, pwa, desktop, mobile 
• highly opinionated
• prefers TypeScript
• reinvention of its existing mature framework
• superstar: angular-cli - scaffold that web app
• 28K+ Github stars
• 500 contributors
• associated w/ Google
• "Angular puts JS in HTML"

React

• a library for the front end
• not so opinionated
• prefers ad hoc bolted-on libraries (flux)
• write in JS and JSX (that compiles down to JS)
• fixed up their license
• superstar: create-react-app - scaffold that web app
• 76K+ Github stars
• 1000 contributors
• associated w/ Facebook
• "React puts HTML in JS"

Vue.js

• "The Progressive JS Framework"
• can be a library, can be a framework (scalable)
• incrementally adoptible - add it on as you go
• easy to create PWAs
• superstar: vue init pwa my-pwa-project
• 68K+ Github stars
• 136 contributors
• not associated w/ a big company - community supported
• "Vue is the way Angular should have been rewritten"

Preact.js

• Not to be confused with React.js

• "Fast 3kB alternative to React with the same ES6 API."​

• small and focused

• 15K+ stars on Github

• 101 contributors

• supports modern browsers

• superstar: react-compat library to achieve React compatibility

choices

Preact Project Goals

• Performance: Render quickly & efficiently
• Size: Small size, lightweight (approximately 3.5kb vs 40-100+kb with React)
• Efficiency: Effective memory usage (recycling, avoiding GC thrash)
• Understandability: Understanding the codebase should take no more than a few hours
• Compatibility: Preact aims to be largely compatible with the React API.

the P is for Performance*

*or pre-React, or petit-React, or poutine-React, depends

Benchmarks

Close to the metal

Preact is geared towards working directly with the DOM in a browser. There are no separate renders of the DOM, so no extra abstractions.

Relies on native browser events, not synthetic abstractions of them - so it doesn't natively support really old browsers ( you can polyfill)

https://soundcloud.com/5minreact_audio/004-preact

Small size

Treats the web as a stable platform, supports modern browsers

Performant

started as a codepen to experiment with different optimizations

provides the thinnest possible Virtual DOM abstraction on top of the DOM.

one of the fastest Virtual DOM libraries available.

diffs Virtual DOM against the DOM itself

Portable and Embeddable

drop-in Preact modules to an existing app. It's tiny, nobody will notice!

Quick to Get Started

https://preactjs.com/repl

Compatible with React

layer on the preact-compat library to render your Preact site compatible to your React site

https://github.com/developit/preact-compat

Differences from React

size, obvs

some changes to React's API

*the way the DOM is handled: "Preact uses the DOM's event system directly instead of abstracting it."

*the diffing model (change detection): "Preact diffs very differently from React - it diffs your Virtual DOM tree against the actual DOM tree"

https://jasonformat.com/preact-ama-on-sideway/

Choose Preact if...

you are interested in learning how React works

you are looking for a super-fast tiny React-like framework

you need a teeny drop-in piece to add to an existing app

Don't Choose Preact if...

you're totally fine with React

you aren't comfortable with managing the DOM

you think React Fiber will solve perf issues

Famous quotes from Jason

"there will never be a Preact Native"

LOL! Preact Native

var Demo = comp(
  {
    render: function (props) {
      console.log('Demo', props.input)
      return h('Page', null, [
        h('StackLayout', null, [
          h('Label',{value: 'OMG wowza its Preact Native!'})
        ])
      ])
    }
  }
)

applicationModule.start({
  create: function () {
    return render(Demo)
  }
})

https://github.com/staydecent/nativescript-preact

demo

Thanks!

https://github.com/jlooper/quicknoms-preact