React Recompose - Higher Order Components Everywhere!

meetjspl / poznan

Wszystkie organizacyjne sprawy Meet.js Poznań

68 stars 1 forks source link

React Recompose - Higher Order Components Everywhere! #61

Closed lebrande closed 5 years ago

lebrande commented 5 years ago

Niedawno stałem się wielkim fanem biblioteki recompose. Jest to narzędzie dedykowane Reactowi. Będzie o wzorcach programowania funkcyjnego w JS, higher order componentach i jak nie wpaść w pewne pułapki tworząc kod z recompose. Recompose używam na codzień w komercyjnym projekcie. Temat wydaje mi się zaawansowany, dlatego postaram się wyjaśnić czym w ogóle jest ta biblioteka i jak ją zrozumieć, jak przestawić się na myślenie w higher order componentach.

Nie zamierzam robić live codingu, ale będę pokazywał snipety i postaram się wszystko odpowiednio animować, aby wzrokowcy mogli odnieść bardzo pozytywne wrażenia.

Konspekt

W czym pomoże recompose?
Refactoring gotowego komponentu, zaczynamy od konkretów
Recompose i dev tools. Problem zagnieżdżeń.
Jak działa funkcja compose? Wzorzec pipe (jak to po polsku?)
Recompose a Higher Order Components
Currying jako element kompozycji,
Kiedy i jak tworzyć własne higher order components?

lebrande commented 5 years ago

EN version

Recently I've became a huge fan of recompose. That's a tool for React, which helps you write code with approach focused on higher order components. I will show you some JS design patterns. Also I will give you tips based on my experience.

I going to speak in Polish ;(

Plan

How does recompose help you make your code better and get pro skills :)
Refactoring of already created component.
Recompose and React Dev Tools. Nesting issue.
How does compose function work? Pipe pattern.
Role of Higher Order Components in recompose
Currying as a required part of recompose.
Reasons for creating your own higher order component.

erykpiast commented 5 years ago

Zawsze mnie zastanawiało, czy ktoś kiedyś pokusił się o one-shot refaktor dużej apki z użyciem recompose i może porównać rozmiar bundle przed i po. Mam tu na myśli głównie rozwlekłość definicji klas w JS (szczególnie po transpilacji do ES5) i współdzielenie kodu. Czyli: ile komponentów wystarczy przepisać z class na withState żeby koszt dodania zależności do projektu się zniwelował :P

lebrande commented 5 years ago

@erykpiast dobry punkt. Nie sądzę, aby udało mi się dokonać porównania na dużej apce, ponieważ piszemy od razu z recompose. Sam pomysł porównania bundle przed i po wydaje się interesujący.

naugtur commented 5 years ago

Super temat. Recompose nie jest nowym gadżetem o którym wszyscy chcą mówić (hooks) a zasługuje na dużo większa popularność. Masz ode mnie dodatkowe 10 minut na prelekcję jeśli chcesz 😅

przemuh commented 5 years ago

Słuchałbym :)

lebrande commented 5 years ago

@naugtur @przemuh dzięki, za feedback 👍 Bardzo fajnie to czytać. Chętnie się rozgadam 😂

lebrande commented 5 years ago

Udostepniam prezkè: http://recompose-hocs-everywhere.surge.sh

SebastianPozoga commented 5 years ago

Nagrania: https://www.youtube.com/watch?v=EAeVlkIGKag&feature=youtu.be

lebrande commented 5 years ago

@SebastianPozoga dzięki za nagranie wideo :) @naugtur zapomniałem włączyć stopera i nawet nie wiem jak upłynęło 37 min. Przepraszam, że nadużyłem dodatkowego czasu :)

erykpiast commented 5 years ago

Wielkie dzięki za prezentację! Była 👌