[HN Gopher] Next.js Live: Code in the Browser with ESM, ServiceW...
___________________________________________________________________
Next.js Live: Code in the Browser with ESM, ServiceWorkers,
Replicache, and WASM
Author : leerob
Score : 98 points
Date : 2021-06-15 16:05 UTC (6 hours ago)
(HTM) web link (nextjs.org)
(TXT) w3m dump (nextjs.org)
| aboodman wrote:
| Hello all, Aaron from Replicache here. Happy to answer any
| questions about Next.js Live or Replicache!
| latchkey wrote:
| Hi Aaron. First time learning about replicache. Headed over to
| the website and the documentation on the server portion seems
| to be a lot of TODO links. Before diving into Live, which looks
| very cool, I guess I'd want to know more about what the server
| side implementation looks like. I could see using this for a
| golang backend that I have to sync data with. Thanks.
| aboodman wrote:
| Yeah, Replicache is in beta right now, and we haven't quite
| finished the detailed server-side documentation. Apologies .
|
| However, there is a walkthrough of implementing the server
| side starting here:
|
| https://doc.replicache.dev/guide/remote-database.
|
| And you can find some samples here:
|
| https://github.com/rocicorp/replidraw
|
| https://github.com/rocicorp/replicache-sample-chat
| baybal2 wrote:
| It's first time I hear of next.js, what is it?
| vbezhenar wrote:
| AFAIK it's framework built upon React.
| jonny_eh wrote:
| It helps you make React apps: https://nextjs.org/
| sharps_xp wrote:
| It's an opinionated react framework with dev tools to make it
| easy to: - render on the client, server (lambda function), or
| at build time - easily create lambda function at edge to act
| as API endpoints
|
| the same ideas have been ported to Vue and Svelte
| equivalents.
| swyx wrote:
| i am very excited about this, kudos to the team on a great
| implementation.
|
| for comparison the netlify equivalents are:
|
| - https://www.netlify.com/products/deploy-previews/
|
| - https://docs.netlify.com/cli/get-started/#share-a-live-devel...
|
| this replicache implementation seems more framework specific, but
| the live collab is just so much exciting to see!
| leerob wrote:
| While Next.js Live is framework specific (redesigning the
| Next.js dev server), the collaboration features will eventually
| be rolled out for the entire Vercel platform!
| nitsky wrote:
| > Faster than local dev: Because it runs entirely within the
| browser, server responses have less latency than localhost.
|
| Next.js Live seems very impressive, but this marketing line is
| scaring me off. It's hard to imagine that running your app in
| webassembly within the browser has a measurable reduction in
| latency vs running on localhost. If anything, I would expect it
| to be slightly higher because of the overhead of
| interpreting/compiling wasm, and the slight performance hit of
| wasm vs native code.
| sktrdie wrote:
| It's because in normal localhost you have to spin up a server
| in another process that serves your JS. With this there's no
| server serving your JS. It's right there in the browser
| already. That's what they mean.
| nitsky wrote:
| I understand, but it is not obvious this provides a
| performance benefit which outweighs the potentials slowdowns
| I mentioned above. I am concerned about the trend of
| JavaScript tools advertising how they are "blazing fast"
| without any benchmarks or serious technical analysis.
| aparsons wrote:
| Also my first thought. If these folk can share metrics to prove
| otherwise, I'll be pleasantly surprised.
| sarosh wrote:
| Hi Aaron - are you using VSCode for the IDE? How is this similar
| to/different from say, Gitpod?
| leerob wrote:
| Next.js Live uses a modified version of Monaco:
| https://microsoft.github.io/monaco-editor/
| sarosh wrote:
| Thanks Lee - appreciate the insight!
| eyelidlessness wrote:
| I went to see the Vercel fork because I was curious what
| sorts of modifications you've made, but i couldn't find it.
| Are you planning on publishing your changes? Can you say a
| little about what they are?
| lucasmullens wrote:
| When/how does the page preview refresh? Seems tricky/unlikely for
| the Next.js page to be in a valid state if every keystroke is
| synchronized.
| aboodman wrote:
| The keystrokes edit the local in-memory state and are
| synchronized in batches to the server and other collaborators.
| Learn more here: https://replicache.dev/
| asadlionpk wrote:
| Did you have to do some OT (Operational Transformation) to
| sync changes between clients?
| aboodman wrote:
| This preview version of Next.js Live doesn't do anything
| special for text editing. It just locks the document while
| one user is editing.
|
| We are excited to work with Vercel to add true
| collaborative text editing on top of Replicache soon.
| dbbk wrote:
| I still haven't seen anyone explain how this code gets
| deployed to the shareable URL though. Is it being pushed to
| the Vercel edge network when you run next dev? What is
| actually happening when you use this on-page code editor?
| Where are those code changes being persisted to?
| dfabulich wrote:
| This looks a LOT like StackBlitz WebContainers which were
| launched last month.
|
| https://blog.stackblitz.com/posts/introducing-webcontainers/
|
| Is this using WebContainers? Or is it just very similar?
|
| The HN discussion about StackBlitz focused on the problem that it
| would only work in Chrome... I assume that's true here as well?
| (Due to lack of the File System Access API?)
| https://news.ycombinator.com/item?id=27223012
___________________________________________________________________
(page generated 2021-06-15 23:02 UTC)