@mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module /...

46
MobX the journey the good parts, the bad parts @mweststrate - michel.codes - React-Finland - 25-4-2019

Transcript of @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module /...

Page 1: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

MobX the journeythe good parts, the bad parts

@mweststrate - michel.codes - React-Finland - 25-4-2019

Page 2: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

React Europe, 2015

Page 3: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking
Page 4: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking
Page 5: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking
Page 6: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

Open SourceThe good parts

The bad parts

OSS for life!

Page 7: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

class ArrowView extends Component { render() { const {from, to} = this.props.arrow; const [x1, y1, x2, y2] = [ from.x + from.width / 2, from.y + 30, to.x + to.width / 2, to.y + 30 ]; return <path className="arrow" d={`M${x1} ${y1} L${x2} ${y2}`} />; }}

@observer

boxes

box props ?!

that's all

Page 8: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

Derivation tree

Page 9: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

nobody cares how smart the solution is

Page 10: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

Reactive Conf 2015

Page 11: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

the OSS project dead zoneNobody takes a serious look

Nobody cares how smart your solution is

No critical mass yet, devs don’t like to gamble

Page 12: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

if you can’t sell the lib….sell the problem

Page 13: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking
Page 14: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

https://medium.com/@lavrton/how-to-optimise-rendering-of-a-set-of-elements-in-react-ad01f5b161ae

Page 15: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking
Page 16: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

Anything that can be derived from the application state, should be derived. Automatically.

Page 17: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

getting out of the OSS dead zoneWhat problem are you solving?

What makes your approach unique?

Testimonials!

Page 18: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

OSS - the good parts

Page 19: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

learning 🎓

Page 20: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

happy users! 😍

Page 21: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

core contributors 👏

Page 22: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

beautiful confs & awesome ppl

Page 23: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

vid tutorials - workshops - book

Page 24: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

always keep learning

comfortzone

you

Page 25: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

always keep learning

comfortzone

you

Page 26: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

getting a raise 🤑

Page 27: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

seeing others succeed 🏃‍♀

Page 28: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

our industry is unique! 👮

Page 29: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

became independent 😅

Page 30: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

OSS - the bad parts

Page 31: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

@#$%@#$% JS stack

babel / typescript / legacydecorators maybe not the best idea ever / fields proposal / es2015 / UMD module / broken minifiers / common JS

modules / metro bundler / flow types / ESM modules / treeshaking webpack or maybe not / internet explorer anyone / proxies / or not /

es5 polyfills / meteor bundler wtf / custom bundler please change your project wtf wtf / optional deps / bundlephobia not like / peer

deps / peer deps / did i mention peer deps yet? or decorators?

Page 32: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

no SLA is the worst SLA

Page 33: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

OSS has no holidays

Page 34: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

not yet another package... 😩

Page 35: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking
Page 36: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

...as quoted by colleague...“When you're awake at night, rather than spending the rest of the night watching the rooftop and being frustrated, it's better to do

something productive”

-Michel, when asked on how he can maintain a popular open source project while having two kids

Page 37: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

popularity

happiness

Page 38: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

the OSS trapdon’t want to let thousands of users down

don’t want to let family down

who makes up for the difference?

Page 39: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

a new feature

or

a new gig?

🤔

Page 40: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

an awesome job

or an

awesome project

🤔

Page 41: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

paint the door

or

review a PR

🤔

Page 42: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

“above all else, guard your heart, for everything you do flows from

it”

Proverbs 4: 23

Page 43: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

living life is the most impactful OSS project you will ever have

Page 44: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

free work needs to be passion driven

Page 45: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

Conclusion1. I’m extremely grateful for all contributors & sponsors

2. We live in a privileged, unique industry, filled with opportunity3. Messaging is crucial for any project to succeed

4. When filing issues, remember: you are asking for free help on something you are being paid for!

5. Obtain sponsoring for projects from your managers!6. Contribute to OSS. It will advance your career

7. Guard your heart and live a balanced life

Page 46: @mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module / broken minifiers / common JS modules / metro bundler / flow types / ESM modules / treeshaking

don’t just develop softwaredevelop you.

@mweststrate

comfortzone

you