Philly ETE 2017 #51 - Universal React with Next.js - Guillermo Rauch

hello everyone so before I begin I wanna apologize that I'm not gonna be running the presentation of my own laptop so it's gonna be a slightly different presentation hopefully it works this is Jen's laughter whoo racially shared it with us so my name is guillermo rauch I'm the CEO of a company called Zeit we make a product for one command deployment of any application it's called now so if you're interested in learning more about what's behind this technology that we call next you can go

to zydeco in your grassy I show you here how you can with one command deploy an application in any directory any type of application any programming language even static files just with one command now so when we set out to create now with an opportunity to simplify deployment to the point where something that used to take weeks or than hours and minutes or multiple commands and orchestrations we got it down to one

command so I've been using react for a few years now and before that I built a lot of single page applications and it was always very upset with how many commands and and all these things I had to configure for creating a really performant application that had JavaScript on the front end but also a server rendered so the premise of next is what we called Universal react.js because it renders in the server like

traditional web 1.0 applications like PHP but also it allows you to pick up on the client resume rendering and do anything you really want to do with Java on the front end so it kind of gives you the best of both worlds so that's what we mean when we talk about Universal it works everywhere same code base server and client really is cool technology can can I get a sense please raise your hands if you've already written RIA J's applications all

right so and within that half how many of you have heard about next all right it's an interesting distribution so today we have an hour and I've only given this presentation once and it was in 30 minutes and the feedback that I had was I was talking too fast and going too fast so today and especially because not everyone knows how I react I'm gonna basically explain everything from scratch so which is right so I make a distinction here between making something easy and simple easy is

something that we can quantify because if you launch an application with one command it's objectively easier than if you run 20 commands they took 5 minutes each you got distracted you went to Twitter you want to grab a cup of coffee then you saw an error it didn't work you come back 20 minutes later so that's not easy but simple is less clear and less concrete notion so when I talk about simplicity first of all I'm going to talk about well-defined boundaries next

jazz is a framework and frameworks sometimes get a bad reputation for doing too much so I think a key idea behind this idea of simplicity has to be that the framework is very predictable has well-defined boundaries you know what it does and what it doesn't do and what to complete it with it supports emergent behavior and by this I mean that you can take next or an XJS application and

combine it with a lot of other building blocks that are out there not created by the framework authors themselves and create really cool combinations of technology so I'm going to show a lot of examples of combining next with existing react components with existing NPM modules so this Frank or doesn't require to reinvent everything from scratch and also that it behaves consistently so the learning curve of this framework is actually probably like 10 minutes so if you want to check it out later I