Speakers – Redux – Let's live code a web application!

View Github Repository Open presentation in a new window

fullstack-lx

See all presentation from fullstack-lx

Speakers – Redux – Let's live code a web application!

0 0

slides_vol_i

Slides for the very first meetup :')

On Github fullstack-lx / slides_vol_i

Fullstack LX

Awesome speakers

António Novais

Twitter: @acanovais

Nizar Venturini

Twitter: @trenpixster

Rogério Vicente

Twitter: @rogeriopvl

But why?

First, let's step back in time

(Redux wink wink)

jQuery era

  • Click binds everywhere
  • DOM pollution
  • Global scope selectors
  • $(children).parent.parent.children
  • Mutation
  • Mutation everywhere!

So what?

  • Refactoring was hedious
  • No structure/code architecture
  • Click baiting
  • All those memory leaks
  • SPA?

    Good luck!

MV* Era

Improvements!

  • Structure...ish
  • Model definition
  • View definition
  • Scoped selectors
  • Bindings

Yet... Bindings Hell

Enter React!

A new paradigm emerged

Not a framework

Functional Programming

Wat?

Quite Rly

"Entra porco, sai salsicha"

Insert a pig, get a sausage

							f(A) => B
f(A) => B
(...)
f(A) => B

Functional approach to DOM composition

			<div>
			  <h3>OMG PONIES</h3>
			</div>

 

 

Functional approach to DOM composition

			React.createElement(
			  'div',
			  null,
			  React.createElement(
			    'h3',
			    null,
			    'OMG PONIES'
			  )
			);

Compositionable

Declarative

Let it sink

			<div>
			  <h3>OMG PONIES</h3>
			</div>

JSX

Babel

github.com/Talkdesk/react-redux-boilerplate

 

 

 

 

 

 

 

 

Sharing is caring

Redux

A predictable state container for Javascript Apps

What does that mean?

¯\_(ツ)_/¯

A little bit of history...

Developing Big Apps

Dependency Hell

Hard to predict effects of a change

Hard to trace data flow

Slow development lifecycle

Takes forever to test things and reproduce state

The list goes on ...

Frustration

Flux

Facebook's pattern for data flow

  • Single directional data flow
  • Actions are just plain Javascript objects
  • A single dispatcher that sends actions to the stores
  • Stores contain the state and change their state
  • Stores tell the views to re-render
  • Views can create new actions

Does this solve all our frustrations ?

In comes Dan Abramov

Goal

Hot reload

Time travelling

- Do you know why Hot reload while maintaining state is difficult with flux pattern? - Stores contain state and if you want to change a store to change behaviour you lose the state - What about time travelling? - It is the ability to reproduce a previous state of the app - By having all these different stores you never have a vision of the whole state of the app

Redux was born!

Single store

Reducers

Functional programming to JS

- A single store that contains the whole state of the App and is only a container. No logic - Reducers that are pure functions that receive a state and an action and return a new state

Single store

  • Contains the whole state of the App
  • Has no business logic
  • Is only a container

Reducers

  • Pure functions
  • Receive a state and an action
  • Return a new state
Code Examples ?

A predictable state container for Javascript Apps

What does that mean?

How the hell can I do something real with just this?

What about side effects?

Did this solve our frustrations?

There is always something more ...

Middlewares

Before actions get to the reducers

Have acess to the action and the store

Add side effects to the actions

Flow control

Augment the

Time Travel goodies? console.log example record actions example record state example

Thunk middleware

Having async actions

Actions that execute in certain conditions

How does this influence React ?

Redux + React

Whole state goes into the root component

All other components re-render themselves

But should they always re-render ? (wink wink Immutable.js)

Redux + React

Smart Components vs Dumb Components

Smart component that provides the store

Maps the state to the underlying components

Passes handlers for bound action creators

Dumb components don't know the existence of redux

Just work with the props they were given

These components can be re-usable

Immutable.js

Markdown support

Write content using inline or external Markdown. Instructions and more info available in the readme.

<section data-markdown>
  ## Markdown support

  Write content using inline or external Markdown.
  Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
</section>

Fragments

Hit the next arrow...

... to step through ...

... a fragmented slide.

This slide has fragments which are also stepped through in the notes window.

Fragment Styles

There's different types of fragments, like:

grow

shrink

fade-out

current-visible

highlight-red

highlight-blue

Transition Styles

You can select from different transitions, like: None - Fade - Slide - Convex - Concave - Zoom

Slide Backgrounds

Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.

Image Backgrounds

<section data-background="image.png">

Tiled Backgrounds

<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">

Video Backgrounds

<section data-background-video="video.mp4,video.webm">

... and GIFs!

Background Transitions

Different background transitions are available via the backgroundTransition option. This one's called "zoom". 

Reveal.configure({ backgroundTransition: 'zoom' })

Background Transitions

You can override background transitions per-slide. 

<section data-background-transition="zoom">

Pretty Code

function linkify( selector ) {
  if( supports3DTransforms ) {

    var nodes = document.querySelectorAll( selector );

    for( var i = 0, len = nodes.length; i < len; i++ ) {
      var node = nodes[i];

      if( !node.className ) {
        node.className += ' roll';
      }
    }
  }
}

Code syntax highlighting courtesy of highlight.js.

Marvelous List

  • No order here
  • Or here
  • Or here
  • Or here

Fantastic Ordered List

One is smaller than... Two is smaller than... Three!

Tabular Tables

Item Value Quantity Apples $1 7 Lemonade $2 18 Bread $3 2

Clever Quotes

These guys come in two forms, inline: “The nice thing about standards is that there are so many to choose from” and block:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

Intergalactic Interconnections

You can link between slides internally, like this.

Speaker View

There's a speaker view. It includes a timer, preview of the upcoming slide as well as your speaker notes.

Press the S key to try it out.

Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).

Export to PDF

Presentations can be exported to PDF, here's an example:

Global State

Set data-state="something" on a slide and "something" will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the page background.

State Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name. 

Reveal.addEventListener( 'customevent', function() {
	console.log( '"customevent" has fired' );
} );

Take a Moment

Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.

Much more

THE END

- Try the online editor - Source code & documentation

Fullstack LX