Boilerplate for a web app today

Slide 1

Slide 1 text

Boilerplate for a web app today opinion by Alex Palcuie

Slide 2

Slide 2 text

> console.log(me)

Slide 3

Slide 3 text

InfoEducatie

Slide 4

Slide 4 text

Need • website for presentation • community for the participants • paperwork for the organizing committee

Slide 5

Slide 5 text

Paperwork?! • student qualiﬁcations from counties • transport sheets • accommodation places • 2 x teacher sheets • rankings for every category • prizes • ministry sheets • NGO sheets • fucking bureaucracy

Slide 6

Slide 6 text

Deliverables • Rails API • Admin Panel • React Frontend

Slide 7

Slide 7 text

To Flux or to not Flux

Slide 8

Slide 8 text

Flux • still have not seen a standard implementation (singleton bleah) • Facebook Flux, Flummox, Reﬂux • too much extra code to understand • for small apps, $.ajax is still okay • you can always start converting when you feel you have to sync a lot (Facebook did that, Twitter is doing that)

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Bundling Browserify+Gulp vs WebPack

Slide 11

Slide 11 text

Why WebPack?! • nice pipeline API • require images, stylesheets, whatever • transform JSX, Babel, whatever

Slide 12

Slide 12 text

ES5 vs ES6 What type of React classes?

Slide 13

Slide 13 text

ES6 • cleaner module system • sexy syntax • not using yet w/ React classes because they dropped mixins and did not replace w/ contexts

Slide 14

Slide 14 text

Routing Inﬂuences more than you think

Slide 15

Slide 15 text

Routing • react-router + react-router-bootstrap • user object on window.Auth.User • global props • window.Auth.login binded to setState

Slide 16

Slide 16 text

Styles Programmers are not designers

Slide 17

Slide 17 text

Styles • LESS works great w/ WebPack • every component w/ it’s own style • Bootstrap FTW

Slide 18

Slide 18 text

Forms The biggest part of my web app

Slide 19

Slide 19 text

Forms • Declarative, reusable, i18n • react-forms • newforms • … maybe manual?! • same problem as Infoarena, we are writing our own

Slide 20

Slide 20 text

Tests To Jest or not to Jest

Slide 21

Slide 21 text

Tests • karma/mocha/chai vs jest • react-router is pretty difﬁcult to test • will go for live screenshot testing

Slide 22

Slide 22 text

OnBoarding Devs • Bogdan (infra Twitter), Vlad (backend Presslabs), Robert (system Intel) • show them videos of Pete Hunt • props vs state (Hootsuite doc) • linting + CI • you will become SPOF

Slide 23

Slide 23 text

Thanks • http://github.com/infoeducatie/infoeducatie-ui • http://github.com/palcu/devnull • @AlexPalcuie