Slides for the talk given at DevoxxMA 2022
www.karakun.comFresh - next generation web frameworkDevoxx Morocco 2022
View Slide
© 2022 Karakun GmbH Markus Schlichting 🐦 @madmas 2Markus SchlichtingSen. Software Engineer / ArchitectCo-Founder of KarakunOrganizer OpenSource Enthusiast
© 2022 Karakun Markus Schlichting 🐦 @madmas 3Knowing me, knowing you…• Who is using…• Node• React• Angular• Next.js
© 2022 Karakun Markus Schlichting 🐦 @madmas 4Fresh - The next-gen web framework• Just-in time rendering• Island-based client hydration• Zero runtime overhead• Typescript support out of the box• No build step• No configuration• MIT Licensed• Based on DenoBuilt for speed, reliability, and simplicity.
© 2022 Karakun Markus Schlichting 🐦 @madmas 5History• Node was created by Ryan Dahl in 2008based on Google V8 Engine• Brought Server-Side JS to the masses,allowed to use the language of the webeverywhere• 2018, Ryan Dahl summarized „10 Things I Regret About Node.js“• Missing features• Promises and Async/Await• ES Modules• TypeScript It all started with Node.js
© 2022 Karakun Markus Schlichting 🐦 @madmas 6N O D E
© 2022 Karakun Markus Schlichting 🐦 @madmas 7Deno• Not a fork• Secure JS and TS runtime• (Still) based on V8• Core is built in Rust• Event-Loop driven by Tokio • Provides a STL• Centric to the Browser APIs
© 2022 Karakun Markus Schlichting 🐦 @madmas 8Deno• Single Executable• bundler (deno bundle)• debugger (--inspect, --inspect-brk)• dependency inspector (deno info)• documentation generator (deno doc)• formatter (deno fmt)• test runner (deno test)• Linter (deno lint)
© 2022 Karakun Markus Schlichting 🐦 @madmas 9Deno: Security• Sandbox• Only explicit enabled access to• Disk• Network• Subprocesses• env variables--allow-read=/tmp--allow-write--allow-net=karakun.com--allow-env—allow-sys…
© 2022 Karakun Markus Schlichting 🐦 @madmas 10Deno: Dependency Management• URLs for dependency management • using the ECMAScript 6 import/exportstandard • Node modules a incompatible• But e.g. esm.sh provides „Deno compatibility mode“• Direct NPM Support is experimental• Global cache• Bundle to prepare deployments https://deno.land/x
© 2022 Karakun Markus Schlichting 🐦 @madmas 11Fresh - The next-gen web frameworkNodets-nodeAngular /ReactYour CodeDenoFreshYour CodeServer-sideIn the BrowserYour CodeYour Code
© 2022 Karakun Markus Schlichting 🐦 @madmas 12Fresh - The next-gen web framework• Just-in time rendering• Island-based client hydration• Zero runtime overhead• No build step• No configuration• Typescript support out of the box• Based on DenoBuilt for speed, reliability, and simplicity.
© 2022 Karakun Markus Schlichting 🐦 @madmas 13Islands Architecture• The ‚sea‘ is the content of page that is staticand can be SSR • islands enable client side interactivity • Isolated components • rendered on the client • Cannot be nestedPhoto by @yaaniu on Unsplash
© 2022 Karakun Markus Schlichting 🐦 @madmas 14Islands Architecture
© 2022 Karakun Markus Schlichting 🐦 @madmas 15Client hydration• Each component separately• Hydration means the enhancement withevent handlers as well as dynamic data• State can be shared between componentsusing SignalsPhoto by Lucas Santos on Unsplash
© 2022 Karakun Markus Schlichting 🐦 @madmas 16Preact• JSX Templates (as in React)• Virtual DOM abstraction• new Preact Signals are supported
© 2022 Karakun Markus Schlichting 🐦 @madmas 17RoutingFile name Route pattern Matching pathsindex.ts / /about.ts /about /aboutblog/index.ts /blog /blogblog/[slug].ts /blog/:slug /blog/foo, /blog/barblog/[slug]/comments.ts /blog/:slug/comments /blog/foo/commentsold/[...path].ts /old/:path* /old/foo, /old/bar/baz
© 2022 Karakun Markus Schlichting 🐦 @madmas 18Tooling• CLI• Deno VS Code extension• Deno IntelliJ extension• Deno Deploy• Preact DevTools compatiblePhoto by Cesar Carlevarino Aragon on Unsplash
© 2022 Karakun Markus Schlichting 🐦 @madmas 19Who is behind Fresh?• Luca Casonato• OpenSource community• Deno 750 committers• Fresh 100 committers• The Deno Company
© 2022 Karakun Markus Schlichting 🐦 @madmas 20Conclusion• No Fresh without Deno • Deno Ecosystem is still small • Very promising feature set • Interesting for PoC and pet projectsFrom https://segmentfault.com
© 2022 Karakun Markus Schlichting 🐦 @madmas 21Resources• 10 things I regret about Node - Ryan Dahl• https://medium.com/deno-the-complete-reference• PodRocket: Demo and Fresh with Luca Casonato• YouTube: A full course on Deno and Fresh
© 2022 Karakun Markus Schlichting 🐦 @madmas 22
Karakun AGElisabethenanlage 25 4051 Basel SchweizT.E.W.+41 61 551 36 00 [email protected]www.karakun.comKarakun GmbHSelkamp 12 44287 Dortmund DeutschlandT.E.W.+49 231 226 157 00[email protected]www.karakun.comMarkus Schlichting @madmas[email protected]E.