Bio-Inspired Frontend Engineering

G. Kay Lee

@gsklee

JSConf.Asia 2015

Doing JavaScript Stuff

!CS academic background

https://commons.wikimedia.org/wiki/File:Mauna_Kea_from_Mauna_Loa_Observatory,_Hawaii_-_20100913.jpg

Once a Telescope Operator

https://commons.wikimedia.org/wiki/File:Phytoplankton_-_the_foundation_of_the_oceanic_food_chain.jpg

Spent my academic years studying chemistry & molecular biology

https://commons.wikimedia.org/wiki/File:Large-scale_structure_of_light_distribution_in_the_universe.jpg

Astronomical vs. Atomic Scale

neural network of our brain?

filaments of our universe

http://apod.nasa.gov/apod/ap130730.html

Both Are Part of the Birth of Life

early-stage embryo

End-Stage Red Giant

(NGC 2392 ESKIMO NEBULA)

https://commons.wikimedia.org/wiki/File:Pillars_of_creation_2014_HST_WFC3-UVIS_full-res_denoised.jpg

We Are All Starchildren

>90% of our body's Atoms Were forged

by some long-gone star

in The distant past

Why are we here?

(of mass)

How are we here?

Why are we here?

This Is JSConf DAMMIT

Where's My Refund

https://quietkinetic.wordpress.com/2013/07/22/sustainable-seaweed-farms-to-the-rescue/

Why are we here

convey ideas & thinking processES

Value Cross-disciplinary knowledge

draw inspirations from the nature

Class Composition as an example

https://www.flickr.com/photos/wildernessphotographs/5843119198/

Just making sure

ES2015 Classes

desugared

http://alexandre-deschaumes.deviantart.com/art/Surreal-Multiplicity-182560154

ES2015 subclasses

desugared

http://michaelpocketlist.blogspot.sg/2015/03/aurora-winds-at-kirkjufell-iceland.html

ES2016

Class

Property

Declarations

(Stage 1)

https://matiash.com/2014/10/09/unreleased-sony-fe-16-35mm-lens-vs-courthouse-rock/

are still prototypal

formalize a specific pattern of prototypal inheritance

Quick facts

https://www.reddit.com/r/EarthPorn/comments/1va95t/lightning_at_cord%C3%B3n_caulle_volcano_in_chile_photo/

unburden the function keyword

are better for static analysis & readability

ES2015 Classes...

appear at exactly where the next level of language abstraction would appear

IMHO

are designed to be “Maximally Minimal”

http://www.ippnw-students.org/Japan/FangataufaMoruroa.pdf

So does technique

technology by itself

Has No Good or bad

it's the intent that matters

http://ntpcmarathon.pixnet.net/album/photo/49840163

fragile base class problem

shit happens

when the inheritance chain

gets too long

Global, “Cascading” Style Sheets

Sass @extend

AngularJS $SCOPE

https://expatexplore.com/tours/irish-explorer/

Composition over inheritance

http://ntpcmarathon.pixnet.net/album/photo/49840163

Global, “Cascading” Style Sheets

CSS Modules

Sass @extend

CSS Modules Class Composition

AngularJS $SCOPE

React Props

Long & Shaky inheritance chain?

Bye!

https://matiash.com/2014/10/09/unreleased-sony-fe-16-35mm-lens-vs-courthouse-rock/

http://alexandre-deschaumes.deviantart.com/art/Surreal-Multiplicity-182560154

React Mixins

Pre-v0.13.0

Post-v0.13.0

Mixins & Traits?

DUH!

https://commons.wikimedia.org/wiki/File:LeafUndersideWithStomata.jpg

cells

one of the most miraculous structures of our Universe

one which has withstood eons of evolution

the fundamental & universal component of life

what's the secret?

http://2013.extrememarine.org.uk/hydrovents/what-is-a-hydrothermal-vent/index.html

Abiogenesis

http://www.wallpaperup.com/14923/Water_blue_ocean_sea_white_waves_frozen_foam_bubbles_bokeh.html

Evolution of cells

protocell

Prokaryotic cell

eukaryotic cell

{}

POJO

React component instance

with Lifecycle Methods

http://blog.autographer.com/tag/travelling/

Symbiogenesis

Let's learn

Origin of Chloroplast

endosymbiosis

from the Nature

Bio-Inspired

Class Composition

Try it out!

“Nagro”

https://quietkinetic.wordpress.com/2013/07/22/sustainable-seaweed-farms-to-the-rescue/

in nature we trust

convey ideas & thinking processES

Value Cross-disciplinary knowledge

draw inspirations from the nature

Thanks!

https://slides.com/gsklee

Bio-Inspired Frontend Engineering

By G. Kay Lee

Bio-Inspired Frontend Engineering

13,753

Bio-Inspired Frontend Engineering

Doing JavaScript Stuff

Once a Telescope Operator

Astronomical vs. Atomic Scale

Both Are Part of the Birth of Life

We Are All Starchildren

This Is JSConf DAMMIT

Where's My Refund

Why are we here

Class Composition as an example

ES2015 Classes

ES2015 subclasses

ES2016

Class

Property

Declarations

Quick facts

IMHO

technology by itself

Has No Good or bad

fragile base class problem

Composition over inheritance

Long & Shaky inheritance chain?

Bye!

React Mixins

Mixins & Traits?

DUH!

cells

Abiogenesis

Evolution of cells

{}

POJO

React component instance

with Lifecycle Methods

Symbiogenesis

Let's learn

from the Nature

Bio-Inspired

Class Composition

in nature we trust

Thanks!

Bio-Inspired Frontend Engineering

More from G. Kay Lee