Why Fresh?
Let me start by asking you a simple question -- "Have you used react?" or have you used any JS framework or library for creat...
For further actions, you may consider blocking this person and/or reporting abuse
Kudos for using Deno! <3
React is not awesome. It encourages people to embed content and the structure for content in code. It looks like fresh is doing the same thing. No. For anything other than toys and one-offs, doing this results in brittle systems to maintain.
Reactive architecture however, now this is awesome. Really really awesome. Learn this from React and fresh, and then when we are done playing, we'll be ready for systems that both scale and can be maintained and grown over time.
All the best!
I agree with the second paragraph, couldn't have said it any better, but about the first paragraph - if you don't mind can you elaborate what do you mean by "embedding content in code", I think I'm missing something here.
I think it’s about having logic, structure and styling in one file. I have never used react, but it always looked very weird to me. I agree with that in large applications, I would never ever want this. When I am changing code, I’ll do it in a ts file, when I change structure, I’ll do it in an html file and when I style something, I’ll do it in a css file. Very simple. That’s how browsers work and it’s a very sensible separation of concerns.
makes somewhat sense, though it's hard to structure your project when it's really big as most of the frameworks don't work the way you want them to and seeing how css-in-js is being used by more people, but I don't hate the way of structuring projects using folders like pages, components, styles too. It's not exactly what you want but is somewhat efficient and readable.
I think having everything in one file is for the purpose of the tutorial and not intended to be for scaling production. I use sass for larger projects. However if it's a quick prototype then it's bootstrap or two for the sake of speed
absolutely, I just wanted to show the basics of the framework, fresh is still very new to be used in production but I have high hopes from it.
Just saw a video from Fireship about Fresh and there is already an article. Great community! Will definitely try Fresh. And well written article! Thanks.
thanks!
I saw the documentation and wondered how can I share state between islands. I can't stick one island inside another island to pass the state by props. For me it seems a big downpoint for fresh. Hope they figure it out.
you can use non interactive "components" inside islands though, but not being able to call an island inside another is surely a thing I hope they work on.
Fresh looks pretty cool. Out of curiousity: Could you find some tooling that helps with Deno imports? VSCode's intellisense alone doesn't cut it and shows me one error after the other when I try and fiddle around with Deno
Install the official deno extension for vsc.
create a
.vscodefolder in the project dir withsettings.jsonfile, put the following content inside it -this is the basic config, you can learn more here.
If you have docker installed, use the official deno devcontainer, it has everything set up
Thank you for sharing!
Can we use preact-router with it ?
again, I haven't tried it myself so I'm not sure, you can try asking in the issues though.
github.com/denoland/fresh/issues
I don't understand what you mean by "doesn't have a build", fresh does build the app, github.com/denoland/fresh/blob/mai...
about bundle size, I'm not really sure as I didn't check but it shouldn't be high according to me.
there are some benefits, being able to run the whole app on edge is a benefit in itself, not to mention all the benefits of using deno over node count in too, overall it's a great experience using fresh and I have a lot of expectations from this framework personally!
its a relatively new tech, I'm currently trying to learn more about it myself so no need to worry 👍
Thanks for the write up. This looks like a cool framework
Great article, thanks for sharing
Thanks for the post Ashish. Nice way of a starter introduction to Fresh. Once again, thanks.
thanks for reading!
Cool, this is a new one for me.
Fresh is old :) try Qwik js developed by Miško Hevery (Creator of AngularJS)
qwik.builder.io/
(Just kidding 😌) Use whatever you need :)
don't manually download engine binaries...
use
asdfandasdf-deno, then drop a.tool-versionsfile in your project rootnew terminal
When moving between projects, there's nothing to do. the
~/.asdf/shims/denoinspects your local.tool-versionswhen pulling a project down, you should run
asdf installwhen you see the.tool-versionsfile is modified.I've now just taught you how to setup any other tool for your project and ensure that when you share the project or come back to it in (insert time frame where your brain turns to mush) minutes, you'll have added a degree of reproducability.
how to import icons
As many npm modules dont yet support deno, things like react-icons may not work, though you can use simple-icons for sure with an image tag.
Other than that I'd personally prefer getting the svg paths of the icons and then exporting them as jsx components, for example. see this --
github.com/denoland/fresh/blob/mai...
got it.
do u have try to deploy on vercel?
i didn't try it, i'd suggest deploying on deno deploy though, runs on edge and has faster deployment
iconify. thank me later.
Is the page refreshed at each action? Like is it refreshed when you add a task in the to-do list?
no it doesnt
So there's JavaScript embedded inside the page, isn't it ?
yes i think, according to what i have read, fresh uses just in time rendering, and also uses partial hydration through islands, and i don't think refreshing on adding a new todo is an expected behavior as i'm not using forms, right?
Mmmh ok. I read the documentation a bit. So it seems JS is sent to the client when islands are used, is that it ? Because without it I cannot see how all of this could work ahah.
But that's cool, Fresh seems really equivalent to Phoenix (an Elixir framework). Those hybrid frameworks are the future IMHO.
yes js is sent to the client when its needed, and not all components are hydrated, only the islands are hydrated i.e. provide interactivity
Did you get twind autocompletion working in vscode? I couldn't get the plugin working in a deno environment
someone in issues helped me out, its working perfectly fine now, see this: github.com/tw-in-js/vscode-twind-i...
Doesn't work for me too, I have opened an issue in the repository regarding this, hopefully they'll fix it soon