TOWARDS COMPONENT BASED WEB UI WITH REACTJSOliver Häger, Dextra

DevCamp, 2015, DevRootz15.05.2015, Campinas, Brazil

Hallo!

Eu sou Oliver Hägeroliver.hager@dextra.com.br

38 anos na Terra

15 anos na Computação

7 anos no Brasil

5 anos como Papai

2 anos na Dextra

TABLE OF CONTENT

◦ Introduction◦ Characteristics◦ Composition◦ Outlook

INTRODUCTIONWhat is React?

1

“

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

From https://facebook.github.io/react/

“

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

From https://facebook.github.io/react/

INTRODUCTION

◦ Library ▫ Not a full stack framework!

◦ Technology Agnostic▫ No dependencies at all

◦ Open & Free▫ Like free beer!

◦ Facebook & Instagram▫ Battle-tested

INTRODUCTION

◦ React on GitHub

source: https://github.com/facebook/react/graphs/contributors

INTRODUCTION

◦ Google Trends

source: https://www.google.com/trends

● new idea

● several smaller projects achieve success

● clean, composable approach to componentization.

INTRODUCTION

◦ Thoughtwork's Radar

TRIALsource: http://www.thoughtworks.com/radar/languages-and-frameworks

CHARACTERISTICSWhat makes React different?

2

CHARACTERISTICS

◦ Mixing Logic & View▫ composable encapsulated

components▫ stateful▫ lifecycle▫ Javascript mixed up with XML

CHARACTERISTICS

> code

https://github.com/ohager/reactdemo/blob/master/jsx/footer.jsx

CHARACTERISTICS

◦ Virtual DOM▫ lightweight in-memory DOM▫ Smart Reconciliation ▫ Reduced DOM updates

CHARACTERISTICS

source: https://facebook.github.io/react/docs/

CHARACTERISTICS

◦ Isomorphic▫ Run same code on server & client▫ Faster app startup▫ SEO friendly

CHARACTERISTICS

COMPOSITIONHow to deal with components?

3

COMPOSITION

◦ Lifecycle

◦ Properties▫ data flow downwards the hierarchy

◦ Callbacks▫ data flow upwards

◦ States▫ trigger rendering

COMPOSITION

◦ Composition Modalities▫ coupled▫ decoupled

COMPOSITION

COMPOSITION

> codehttps://www.devbutze.com/dojo/react/#/example/composition

https://www.devbutze.com/dojo/react/#/example/composition/decoupled

Coupled Composition◦ Pro

▫ Intuitive usage▫ Consistent data flow▫ Better maintainability

◦ Contra▫ More design effort

COMPOSITION

Decoupled Composition◦ Pro

▫ Easy to implement▫ Broadcast

▫ Operability between non-related components

◦ Contra▫ Poor maintainability (Event Hell )

COMPOSITION

OUTLOOKWhat’s coming next?

4

◦ Large Applications▫ Flux Architecture

OUTLOOK

source: https://facebook.github.io/flux/docs/overview.html

◦ React Native ▫ iOS, Android and future platforms

OUTLOOK

◦ Testing Components▫ TestUtils Addon▫ Based on Jest

OUTLOOK

◦ Integration in existing projects▫ Library with no dependencies▫ i.e. with Backbone, AngularJS

OUTLOOK

> demo

https://www.devbutze.com/dojo/angulardemo/app/

Danke.

QUESTIONS!oliver.hager@dextra-sw.com

oliver@devbutze.com

Code : github.com/ohager/reactdemo

Live Demo: devbutze.com/dojo/react/