@mweststrate - michel.codes - React-Finland - 25-4 …fields proposal / es2015 / UMD module /...
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/1.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/2.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/3.jpg)
![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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/4.jpg)
![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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/5.jpg)
![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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/6.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/7.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/8.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/9.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/10.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/11.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/12.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/13.jpg)
![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://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/14.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/15.jpg)
![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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/16.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/17.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/18.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/19.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/20.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/21.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/22.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/23.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/24.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/25.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/26.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/27.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/28.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/29.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/30.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/31.jpg)
@#$%@#$% 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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/32.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/33.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/34.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/35.jpg)
![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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/36.jpg)
...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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/37.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/38.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/39.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/40.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/41.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/42.jpg)
“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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/43.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/44.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/45.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022060404/5f0efd8d7e708231d441f11a/html5/thumbnails/46.jpg)
don’t just develop softwaredevelop you.
@mweststrate
comfortzone
you