I love how ambitious Zeit is being, but I've found that their apps are not quite as polished as their shiny-packaging makes out. I certainly wish them lots of luck though!
Interesting! I really like the architecture here. I think the next major opportunity for abstraction is all the server/client detection you still have to do. Do I want `request.headers['Cookie']` (server), or `document.cookie` (client)? Do I want to create a fresh Redux store (server), or hook into a global one (client)?
It's definitely not hard for community members to build these abstractions themselves (`cookies = (req) => req ? req.headers['Cookie'] : document.cookie`), but some of these are going to play into major use cases like authentication, so, as Next matures, it'll start to make sense to provide these especially common abstractions out of the box.
That said, these are next steps; the first release is all about showcasing the fundamental architecture, and it's looking gooood :D
If someone wants to solve this problem and wants inspiration, look into how Unreal Engine's scripting/networking architecture works. Gamedev and webdev can be very similar at times.
Maybe I'm misunderstanding but I don't think universal apps will share so much code with the client. It's just the view layer that is shared (React components in this case). You wouldn't make changes on the server side by piping them through Redux, you'd just use your regular code paths to read the JSON data from the client and send an update query to the database.
You may be interested in Opa (http://opalang.org). I'm unsure how well it abstracts away client/server detection, but from what I understand about it, you have one codebase for both your client and server. I've never used it however, so I can't vouch for it entirely, but it certainly looks interesting.
What do you like about it? It wasn't immediately obvious to me that those were even clickable and the <details> text does not differ from the <summary> text so it all kind of rolls together in a weird way as your click around.
I think they mean the unexpected usage of semantic markup in the wild. It's an ongoing battle to get it used more broadly, so it's nice to see it popping up unannounced and working so nicely. Your (valid) gripes are mostly out of the repo's control, as all styling appears to be GitHub.
Getting a React project in place (webpack config, code structure, all the boilerplate, redux,...) swallows quite some time. And I haven't found a bootstrapper yet that I liked.
Have you looked into electrode.io? It's the total package with testing, server side rendering, optional above-the-fold rendering, profiling, etc.
It took about half a day to get used to it, but I enjoyed not having to make the decisions over and over again and handles the basics as well as advanced use cases.
It's been really great, and reporting issues and small pull requests has been super easy so far. Not really what I expected from a company like walmart so I was pleasantly surprised.
The only fundamental disagreement I have with it is how the "client" folder is organized by default. I think it's a mistake to organize by the type of file (component, reducers, etc). Instead, the organization should be centered around the real use (pages, resources, etc.) Explained in more detail here, https://medium.com/@alexmngn/how-to-better-organize-your-rea...
I understand that's personal preference, and my preference is born out of seeing more than one react app become a tangled mess because isolation was hard to understand based upon file structure.
Off-topic, but what process are people using to make these animated demos? The command-line and browser demo on this page is so clean and crisp. Is it just a screen cap with a ton of post-processing, or is there more to it?
We released DemoKit last week to do precisely this (be able to script demos and record them, that way you can easily re-record them if your product changes, or if there's a typo, etc): http://blog.runkit.com/2016/10/18/introducing-demokit.html
I am really not into new frameworks, quite the opposite, but this is cool and I can see immediate value of this approach thanks to gif movie on the homepage.
I'm a little confused about the benefits of server side rendering. I thought the point of these js UI frameworks was to make the client do a bunch of the work? Can anyone give me some of the upsides? Thanks!
server side rendering only on the first load / if the client has disabled js. If the client has js enabled, after the first load, the app works as a js spa
classic SPA:
(client request) -> (retrieve empty divs + js) -> (js kicks off) -> (API results used to fill initial page content) -> (further page interaction calls APIs to mutate client side page)
SSR:
(client request) -> (server retrieves empty divs + js, API results used to fill initial page content) -> (fully rendered first page view + js delivered to client) -> (further page interaction calls APIs to mutate client side page)
this sounds great, but isnt the point of a js web app that the data resides or are cached on the client !? Making it possible to use offline. And have real time push via websocket when online !? Server side rendering frameworks are as old as it gets.
The point of a js web app is that you can run it in a web browser. Hammers and nails are even older than server side rendering, yet somehow they still function perfectly.
There are advantages to not coupling the client and the server. Like for example e-mail and IRC-chat. You can have a browser client, but also a native mobile app client, bot running against the same server API. Decoupled software almost always means more productivity.
Hammers and nails equivalent is cgi/perl/php/asp and they still do a fine job. You can use the screw machine to manually punch down screws, but then why not use the hammer and nails instead, as you do not see the advantage of the screw machine.
Yeah those would just be separate endpoints/requests. text/html vs application/json. Instead of serving a static html file that bootstraps your react app, you're serving a rendered component.
Not really any different from building say a PHP app that serves an API to a mobile app.
If the user has JavaScript turned off, the whole point of a JavaScript app is lost. You could just render all the HTML on the server like a PHP app, witch would also make Reac pointless.
Server-side rendering generally has quite a few upsides:
* Simplicity. You don't need a fancy bunch of tools to cross-compile things, or any big frameworks, because a bunch of problems (browser compatibility especially) disappear. No more random people's browsers. You control every variable, and you can far more easily accurately test the end result.
* Shared data between requests. You can easily cache requests to backend services for multiple users, or even cache the entire rendered outputs of pages or parts of pages. Instead of every one of your users hitting a backend service from their browser and waiting for the result, you can hit it once every X, and then every other page load becomes just a cache read. In many simple cases you can have dynamically generated page content that's served up and readable after a single cache read, and update the cache totally async on the server too. Super fast.
* Data transfer, sometimes. If your end page is small but you use a lot of JS to render it, and your users load new pages more often than they reload content inside an already open page, then you might well end up transferring less data with a server-side approach (although this is very case specific).
* Page rendering times. If you use JS frameworks badly browers will really struggle, especially on mobile. Even with React you can really shoot yourself in the foot: https://github.com/reddit/reddit-mobile/issues/247. Obviously you shouldn't use JS frameworks badly, but people do. Static HTML + CSS reliable renders very very fast, everywhere.
* SEO. Google now has a degree of ability to run JavaScript (not unlimited, but fairly good), but nobody else seems to. Google is about 80% of US search traffic, so if any content you render client-side only will get about 20% less search traffic than it would otherwise.
* Accessibility. Some screen reading tools etc aren't great at JavaScript (although this is improving). More generally all sorts of other tools (site scrapers, sentiment analysis bots, whatever) have to put in way more effort to read your content.
* Network resilience - if you serve up only half an HTML page, or a couple of your external resources get dropped, your end user probably gets something sensible-ish. If you drop a JS file you depend on for rendering, it's all over. Offline with service workers is a good argument for progressive enhancement on top of this though: JS can also improve later network resilience drastically.
That's server-side rendering generally - the comparison gets more complicated and you lose some of this (simplicity especially) if you do isomorphic rendering (as here I think), where you render the page on the server and the client too.
i'm not sure i follow your logic. how does a poor data connection affect js execution?
if you have to do additional template fetching via follow-up async requests, sure. but if you serve the js & js-parsed/executed template in the initial request, then the only difference would be a synchronous reflow/paint for js (white page flash) vs streamed/incremental reflow/repaint.
If you can barely get 1 request through, it might take a long time before the JS will load and run, as it has to load completely before running at all.
maybe amongst HN (i swear by uMatrix & uBlock Origin), but the general public prefers their favorite websites not to be largely broken.
completely disabling scripting [rather that just disabling third-party script injection] is not a pleasant experience, even for the technical crowd. i already reluctantly have to whitelist CDNs which can track me across the internet.
The second point "Shared data between requests" would actually turn into a negative when it comes to dynamic web apps; if you had to re-render a component in realtime and send the HTML for that component over the wire for every permutation and change of data (which will be different for each user), caching would be futile.
Also, this will basically move cache consumption from the client to the server; which is worse for the company which has to pay for hosting.
Performance-wise, full server-side rendering is a huge step back. For dynamic web apps, next.js is going to drive up hosting costs massively and open you up to DDoS attacks because of server-side cache issues. I suppose it's OK for static websites.
One benefit is less roundtrips to actually provide meaningful content to the user.
As another comment noted, a typical SPA just delivers a bunch of script, link and empty div tags to be populated after JS loads and runs on the client. With SSR you can at least provide some meaningful content for the user to experience while the rest of the JS loads and improves the existing experience instead of providing the entire experience.
So from what I understand, the benefit of these single-page-app frameworks is not that it makes the client do all the work, but that the user experience is more fluid (aka no full page loading and blinking). Doing 'work' on the server side will always be faster resource wise. This project tries to straddle both benefits by injecting server-rendered sub-components into a single page app. P cool if you ask me!
Keep reading past:
"## Automatic server rendering and code splitting"
&
"## Anticipation is the key to performance"
Each sub-component is loaded dynamically which speeds up the initial load time but still allows for the 'flow' of single page apps.
- "For www.zeit.co we've implemented a technique on top of Next.js that brings us the best of both worlds: every single <Link /> tag pre-fetches the component's JSON representation on the background, via a ServiceWorker."
Two simple practical benefits: (1) Performance for first page load. (2) SEO.
Also because of network latency sometimes it's faster to just reload the whole page than to send a few async requests and wait for them to return while the user sits there wondering what's going on.
We will eventually go full server rendering and just stream every frame to a thin client. We have good enough network now with gbe consumer bandwith and less then 1ms latency up to 50km. But we need more powerful, smaller and cheaper servers.
I can pay to render everything for my user, essentially streaming their webpage to them. Or for the potential cost of a slightly slower page load I can offset the cost of all that rendering to their xGHz multi core CPU that's likely sitting idle.
It would make digital rights management (DRM) easier. Companies already spend a lot of money on DRM. There are already services today that lets you use a remote desktop for computer-aided design (CAD) work or gaming. But as you said, it's not economical yet.
Latency is certainly not 1 ms for a video frame in desktop resolution. It also means lower visual quality due to the fact that video compression would be needed to make it even slightly possible. Also, how many people actually have a GbE connection to the internet?
The 1ms is network overhead, witch is nothing considering how long it takes for the image to render on the screen. The CPU and the GPU could be several miles apart.
> The 1ms is network overhead, witch is nothing considering how long it takes for the image to render on the screen.
Yes, latency for a single bit of payload to ever hit the client. The rest of the data then needs to be transferred as well. Transferring that amount of data constantly would be terrible with regards to battery life.
> The CPU and the GPU could be several miles apart.
How exactly? Would you send draw commands over the internet?
More data sent via carriers means they will be able to negotiate better deals and peering. So when 10Gbe hits the consumer market, they will let their users have 10Gbe downstream bandwidth, like a HDMI cable. With some compression you could stream 60 fps + sound. Sure it would use a lot of power, but the usage would foremost not be mobile devices, more like TV's for gaming, and workstations for other programs, BC to PC full circle. You could probably do a lot of optimizations like using a vector format, to drastically decrease bandwidth. I do not know exacly how it can be implemented technically, please give me break ...
Some times things can be turned upside down and it's really hard to change your way of thinking, like HDDs gets faster then RAM or networks is almost as fast as internal buses. Not saying it is like that today, but it might be soon and it will be hard to break out of old design patterns.
Your comment would be more useful if you gave us that reason.
"Filesystem as the API" in this case looks more like "convention over configuration" (which has worked fine for other frameworks like Rails), it doesn't actually seem to be using the filesystem as the only storage backend.
Ah, I see what you're saying. I didn't consider deeper/complex routes with parameters.
This scheme seems to force route parameters into query parameters. Disadvantage: It's not RESTful. Advantage: Your route parameters are now named query parameters. You only handle one dict of parameters...
Which part of it would be considered unfavorable? Perhaps it's harder for a human to read and understand, but all of the content necessary for Google to understand it is present in that HTML source.
You may have missed it if you hadn't scrolled to the right.
Is there a reason the files are ".js" rather than ".jsx"?
As it stands, my text editor defaults to the JS syntax highlighting. I suppose one could make JSX their default JS syntax, but then JSX would incorrectly appear to be correct in non-React files.
I don't think many have embraced the .jsx extension.
And arguably it doesn't make a lot of sense, because when working with most modern frameworks/libs, JSX is not the only non-standard-js element in the file. Should we call it .es6, .es2015, .es2015+jsx ?
Some developers (including FB) are using .js for React JSX files now, instead of the .jsx extension. I think the best argument for this is that, while JSX features aren't in the ES2016/7 spec, they may be eventually. And when you're transpiling your code to JS in the end anyway (potentially using JSX, Flow, and other tools that aren't actually valid ES2016/7 code), it's simpler to call it .js than think about renaming files when you add more steps to your babel process (file.flow.jsx.xyz...).
It hasn't taken off completely, and personally I like having the ".jsx" extension indicate that file will export a React component instead of plain javascript.
I remember I started out using `.jsx`, but switch to `.js` solely because I could use `require()` without specifying the extension, WITHOUT modifying the module resolution algorithm.
I don't believe so, though I guess some do. The purpose of (well-written) "thick clients" is to provide real-time interactivity and reduce bandwidth. Beyond this, if something can be done on the server without degrading the app experience, it probably should be.
Added bonus if the site works fine without client-side JS at all (which Next.js does)
Having to put your program in a string makes it hard to edit.
Syntax highlighting, static analysis and tooling in general that helps you filter problems might not work there.
To me, tooling is very important since software is more consistent/reliable/productive at simple repetitive tasks like matching parenthesis, braces, quotes... and in my case I take it further like documenting types via documentation tags and verifying that function signatures and return types match. That alone helps me save a lot of time once the code has grown over 1 kSLOC.
I think it should be replaced to just a filename that gets required.
I left https://zeit.co/blog/next open in Chrome over lunch and when I came back the tab was out of memory .. so you guys will probably want to look into that. But otherwise A++
Same here. 3 times in a row now, it has crashed Chrome if I left it open long enough for it to do so. Looks like a fun framework, but crashing browsers is kind of a problem.
It's not the gif OR the svg (individually) but somehow both together are causing it. I'm on Win7 with 2 gig ram and scrolling this (see pastebin) up from the bottom causes cpu to jump and memory near 1 gig with hdd looping endlessly, so i have to hard power off just to recover any function.
173 comments
[ 2.4 ms ] story [ 22.4 ms ] threadForward and backward navigation only works up to one level. Is that a limitation of the framework or an intentional design choice?
https://nextgram.now.sh/
It's definitely not hard for community members to build these abstractions themselves (`cookies = (req) => req ? req.headers['Cookie'] : document.cookie`), but some of these are going to play into major use cases like authentication, so, as Next matures, it'll start to make sense to provide these especially common abstractions out of the box.
That said, these are next steps; the first release is all about showcasing the fundamental architecture, and it's looking gooood :D
[0] http://react-server.io/
https://github.com/zeit/next.js#faq
[0] http://primercss.io/
Especially for quickly prototyping an idea.
Getting a React project in place (webpack config, code structure, all the boilerplate, redux,...) swallows quite some time. And I haven't found a bootstrapper yet that I liked.
It took about half a day to get used to it, but I enjoyed not having to make the decisions over and over again and handles the basics as well as advanced use cases.
The only fundamental disagreement I have with it is how the "client" folder is organized by default. I think it's a mistake to organize by the type of file (component, reducers, etc). Instead, the organization should be centered around the real use (pages, resources, etc.) Explained in more detail here, https://medium.com/@alexmngn/how-to-better-organize-your-rea...
I understand that's personal preference, and my preference is born out of seeing more than one react app become a tangled mess because isolation was hard to understand based upon file structure.
Currently using it on a project and it works seamlessly.
https://github.com/threepointone/glamor
http://screentogif.codeplex.com
[1] http://blog.bahraniapps.com/gifcam/
[2] https://github.com/thetarkus/WebMCam
https://github.com/thetarkus/WebMCam
https://github.com/GNOME/byzanz
https://hyper.is/
Stylizing is done on the terminal itself, and then anything (like Quicktime) could do a recording.
Thank you for making this.
SSR: (client request) -> (server retrieves empty divs + js, API results used to fill initial page content) -> (fully rendered first page view + js delivered to client) -> (further page interaction calls APIs to mutate client side page)
Hammers and nails equivalent is cgi/perl/php/asp and they still do a fine job. You can use the screw machine to manually punch down screws, but then why not use the hammer and nails instead, as you do not see the advantage of the screw machine.
Not really any different from building say a PHP app that serves an API to a mobile app.
* Simplicity. You don't need a fancy bunch of tools to cross-compile things, or any big frameworks, because a bunch of problems (browser compatibility especially) disappear. No more random people's browsers. You control every variable, and you can far more easily accurately test the end result.
* Shared data between requests. You can easily cache requests to backend services for multiple users, or even cache the entire rendered outputs of pages or parts of pages. Instead of every one of your users hitting a backend service from their browser and waiting for the result, you can hit it once every X, and then every other page load becomes just a cache read. In many simple cases you can have dynamically generated page content that's served up and readable after a single cache read, and update the cache totally async on the server too. Super fast.
* Data transfer, sometimes. If your end page is small but you use a lot of JS to render it, and your users load new pages more often than they reload content inside an already open page, then you might well end up transferring less data with a server-side approach (although this is very case specific).
* Page rendering times. If you use JS frameworks badly browers will really struggle, especially on mobile. Even with React you can really shoot yourself in the foot: https://github.com/reddit/reddit-mobile/issues/247. Obviously you shouldn't use JS frameworks badly, but people do. Static HTML + CSS reliable renders very very fast, everywhere.
* SEO. Google now has a degree of ability to run JavaScript (not unlimited, but fairly good), but nobody else seems to. Google is about 80% of US search traffic, so if any content you render client-side only will get about 20% less search traffic than it would otherwise.
* Accessibility. Some screen reading tools etc aren't great at JavaScript (although this is improving). More generally all sorts of other tools (site scrapers, sentiment analysis bots, whatever) have to put in way more effort to read your content.
* Network resilience - if you serve up only half an HTML page, or a couple of your external resources get dropped, your end user probably gets something sensible-ish. If you drop a JS file you depend on for rendering, it's all over. Offline with service workers is a good argument for progressive enhancement on top of this though: JS can also improve later network resilience drastically.
That's server-side rendering generally - the comparison gets more complicated and you lose some of this (simplicity especially) if you do isomorphic rendering (as here I think), where you render the page on the server and the client too.
s/common/uncommon
if you have to do additional template fetching via follow-up async requests, sure. but if you serve the js & js-parsed/executed template in the initial request, then the only difference would be a synchronous reflow/paint for js (white page flash) vs streamed/incremental reflow/repaint.
completely disabling scripting [rather that just disabling third-party script injection] is not a pleasant experience, even for the technical crowd. i already reluctantly have to whitelist CDNs which can track me across the internet.
Performance-wise, full server-side rendering is a huge step back. For dynamic web apps, next.js is going to drive up hosting costs massively and open you up to DDoS attacks because of server-side cache issues. I suppose it's OK for static websites.
As another comment noted, a typical SPA just delivers a bunch of script, link and empty div tags to be populated after JS loads and runs on the client. With SSR you can at least provide some meaningful content for the user to experience while the rest of the JS loads and improves the existing experience instead of providing the entire experience.
Keep reading past: "## Automatic server rendering and code splitting" & "## Anticipation is the key to performance"
Each sub-component is loaded dynamically which speeds up the initial load time but still allows for the 'flow' of single page apps.
- "For www.zeit.co we've implemented a technique on top of Next.js that brings us the best of both worlds: every single <Link /> tag pre-fetches the component's JSON representation on the background, via a ServiceWorker."
Also because of network latency sometimes it's faster to just reload the whole page than to send a few async requests and wait for them to return while the user sits there wondering what's going on.
I can pay to render everything for my user, essentially streaming their webpage to them. Or for the potential cost of a slightly slower page load I can offset the cost of all that rendering to their xGHz multi core CPU that's likely sitting idle.
Not to mention the cacheability of the data.
You just described every single non-SPA...
Yes, latency for a single bit of payload to ever hit the client. The rest of the data then needs to be transferred as well. Transferring that amount of data constantly would be terrible with regards to battery life.
> The CPU and the GPU could be several miles apart.
How exactly? Would you send draw commands over the internet?
you're all idiots.
"Filesystem as the API" in this case looks more like "convention over configuration" (which has worked fine for other frameworks like Rails), it doesn't actually seem to be using the filesystem as the only storage backend.
Next's routing is much more similar to Jekyll's which quite literally is based on your filesystem file-organisation.
This scheme seems to force route parameters into query parameters. Disadvantage: It's not RESTful. Advantage: Your route parameters are now named query parameters. You only handle one dict of parameters...
I'm not sure how I feel about this.
- You can't have beautiful URLs
- you can't regroup small related routes in one file
- you can't remap you urls without changing your project structure
- changing your project structure means changing your urls
- now you have part of your url definition in the file structure and part of it in your code logic
- of course it's harder to do anything using virtual routes: load balancing, aliasas and redirections, generating urls on the fly, etc
Google bots do not view this rubbish favourably.
You may have missed it if you hadn't scrolled to the right.
Minifying HTML, JS, CSS is a common practice
The Structured Data Testing Tool doesn't complain.
We'd need someone to try it out and get the results of the other Google Search Console tools to know for sure, however.
As it stands, my text editor defaults to the JS syntax highlighting. I suppose one could make JSX their default JS syntax, but then JSX would incorrectly appear to be correct in non-React files.
And arguably it doesn't make a lot of sense, because when working with most modern frameworks/libs, JSX is not the only non-standard-js element in the file. Should we call it .es6, .es2015, .es2015+jsx ?
So yeah, sticking with .js is common.
JSX is not.
It hasn't taken off completely, and personally I like having the ".jsx" extension indicate that file will export a React component instead of plain javascript.
There are lots of arguments online about this: https://github.com/facebook/react/issues/3582#issuecomment-8... https://www.reddit.com/r/reactjs/comments/4kkrwg/ask_js_or_j...
I've been reading a lot about SSR lately. Correct me if I'm wrong, but wasn't one of the points of thick clients to offload processing to the client?
Added bonus if the site works fine without client-side JS at all (which Next.js does)
To me, tooling is very important since software is more consistent/reliable/productive at simple repetitive tasks like matching parenthesis, braces, quotes... and in my case I take it further like documenting types via documentation tags and verifying that function signatures and return types match. That alone helps me save a lot of time once the code has grown over 1 kSLOC.
I think it should be replaced to just a filename that gets required.
It's not the gif OR the svg (individually) but somehow both together are causing it. I'm on Win7 with 2 gig ram and scrolling this (see pastebin) up from the bottom causes cpu to jump and memory near 1 gig with hdd looping endlessly, so i have to hard power off just to recover any function.
http://pastebin.com/AMdhpWcn
~