1import{S as Qe,i as Ve,s as ta,k as i,q as p,a as c,y as $t,l as r,m as l,r as u,h as e,c as f,z as xt,n,b as o,G as a,A as Tt,g as jt,d as Dt,B as Jt,M as ea}from"../chunks/index.51348c94.js";/* empty css */import{C as aa}from"../chunks/CodeBlock.08d2e5e0.js";import{I as He}from"../chunks/Image.37c8e6c5.js";function sa(Mt){let m,h=`<code class="language-python"><span class="token keyword">async</span> <span class="token keyword">def</span> <span class="token function">weather_table</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> 2 <span class="token triple-quoted-string string">"""Dynamically generated python content 3 directly incorporated into the HTML"""</span> 4 <span class="token comment"># These are actual real-time weather.gov observations</span> 5 <span class="token keyword">try</span><span class="token punctuation">:</span> results <span class="token operator">=</span> <span class="token keyword">await</span> all_weather<span class="token punctuation">(</span><span class="token punctuation">)</span> 6 <span class="token keyword">except</span><span class="token punctuation">:</span> <span class="token keyword">return</span> P<span class="token punctuation">(</span><span class="token string">'Weather not available'</span><span class="token punctuation">)</span> 7 rows <span class="token operator">=</span> <span class="token punctuation">[</span>Tr<span class="token punctuation">(</span>Td<span class="token punctuation">(</span>city<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token operator">*</span><span class="token builtin">map</span><span class="token punctuation">(</span>Td<span class="token punctuation">,</span> d<span class="token punctuation">.</span>values<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> cls<span class="token operator">=</span><span class="token string">"even:bg-purple/5"</span><span class="token punctuation">)</span> 8 <span class="token keyword">for</span> city<span class="token punctuation">,</span>d <span class="token keyword">in</span> results<span class="token punctuation">.</span>items<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span> 9 flds <span class="token operator">=</span> <span class="token string">'City'</span><span class="token punctuation">,</span> <span class="token string">'Temp (C)'</span><span class="token punctuation">,</span> <span class="token string">'Wind (kmh)'</span><span class="token punctuation">,</span> <span class="token string">'Humidity'</span> 10 head <span class="token operator">=</span> Thead<span class="token punctuation">(</span><span class="token operator">*</span><span class="token builtin">map</span><span class="token punctuation">(</span>Th<span class="token punctuation">,</span> flds<span class="token punctuation">)</span><span class="token punctuation">,</span> cls<span class="token operator">=</span><span class="token string">"bg-purple/10"</span><span class="token punctuation">)</span> 11 <span class="token keyword">return</span> Table<span class="token punctuation">(</span>head<span class="token punctuation">,</span> <span class="token operator">*</span>rows<span class="token punctuation">,</span> cls<span class="token operator">=</span><span class="token string">"w-full"</span><span class="token punctuation">)</span></code>`;return{c(){m=i("pre"),this.h()},l(d){m=r(d,"PRE",{class:!0});var j=l(m);j.forEach(e),this.h()},h(){n(m,"class","language-python")},m(d,j){o(d,m,j),m.innerHTML=h},p:ea,d(d){d&&e(m)}}}function na(Mt){let m,h,d,j,Nt,it,W,Ct,rt,_,qt,K,Gt,Wt,lt,P,pt,D,ut,A,y,Q,Ot,Bt,ct,O,Lt,ft,I,k,V,Rt,Yt,mt,B,Ut,ht,E,g,tt,Xt,zt,dt,L,Zt,wt,R,J,Kt,yt,M,kt,Y,N,Qt,gt,C,bt,S,b,et,Vt,te,vt,U,ee,Ht,$,v,at,ae,se,Ft,X,ne,_t,x,H,st,oe,ie,Pt,z,re,At,T,F,nt,le,pe,It,w,ue,q,ce,fe,G,me,he,Et;return P=new aa({props:{lang:"python",$$slots:{default:[sa]},$$scope:{ctx:Mt}}}),D=new He({props:{src:"/images/posts/weather-table-fasthtml.png",alt:"Weather Table"}}),M=new He({props:{src:"/images/posts/img-gen-ui-fasthtml.png",alt:"Image Generation UI"}}),C=new He({props:{src:"/images/posts/hacker-news-feed.png",alt:"Hacker News Feed"}}),{c(){m=i("h3"),h=i("a"),d=i("span"),j=p("#"),Nt=p("Introduction"),it=c(),W=i("p"),Ct=p("If youâre into web development, you might be familiar with the complexities that come with using frameworks like Django or Flask. These frameworks are powerful but often require a lot of boilerplate code, especially when setting up even simple projects. This can be frustrating if you just want to get something up and running quickly, without the hassle of managing models, views, templates."),rt=c(),_=i("p"),qt=p("This is where "),K=i("strong"),Gt=p("FastHtml"),Wt=p(" steps in. FastHtml is a relatively new web development framework that simplifies the process of building dynamic web applications. Itâs designed for developers who want to use Python to handle both the backend and frontend without needing to dive deep into JavaScript. For instance, if youâre creating a quick dashboard, a prototype, or an interactive report, FastHtml makes it easy to get your project off the ground with minimal setup."),lt=c(),$t(P.$$.fragment),pt=c(),$t(D.$$.fragment),ut=c(),A=i("h3"),y=i("a"),Q=i("span"),Ot=p("#"),Bt=p("How Does FastHtml Compare to Other Frameworks?"),ct=c(),O=i("p"),Lt=p("FastHtml draws inspiration from FastAPI, particularly in terms of developer experience. If youâre already fam
11iliar with FastAPI, youâll find FastHtml extremely comfortable to work with. The main difference is in focus: FastAPI is designed for creating APIs, while FastHtml is tailored for creating HTML-based web applications. If youâre someone who prefers writing Python over JavaScript, FastHtml lets you build modern Single Page Applications (SPAs) without needing to rely heavily on JS frameworks."),ft=c(),I=i("h3"),k=i("a"),V=i("span"),Rt=p("#"),Yt=p("Frontend Complexity Made Simple"),mt=c(),B=i("p"),Ut=p("One of the biggest headaches in modern web development is managing the frontend, especially with frameworks like React or Angular. These are powerful but can be overkill for simpler projects, introducing a lot of complexity. FastHtml, on the other hand, uses HTMXâa small JavaScript library that allows you to handle dynamic content directly within your HTML. This means you can create interactive elements like forms or content updates without writing much JavaScript, if any at all. Itâs a great way to manage frontend complexity while keeping your codebase lightweight and easy to maintain."),ht=c(),E=i("h3"),g=i("a"),tt=i("span"),Xt=p("#"),zt=p("What Can You Build with FastHtml?"),dt=c(),L=i("p"),Zt=p("FastHtml can be used for general purpose full stack web applications much like what you can build with React or Django, but much more lightweight and you donât have to contact switch between Python and JavaScript. Itâs particularly well-suited for creating quick dashboards, prototypes, and in-company appsâsimilar to what you might use frameworks like Gradio or Streamlit for. Itâs also great for interactive reports, custom blogs, and content-heavy sites where you want some interactive or dynamic features."),wt=c(),R=i("p"),J=i("a"),Kt=p("Image Generation UI"),yt=c(),$t(M.$$.fragment),kt=c(),Y=i("p"),N=i("a"),Qt=p("Hacker News Feed"),gt=c(),$t(C.$$.fragment),bt=c(),S=i("h3"),b=i("a"),et=i("span"),Vt=p("#"),te=p("Modern Apps with FastHtml"),vt=c(),U=i("p"),ee=p("Whatâs really cool about FastHtml is that itâs not just for traditional multi-page web apps; itâs also designed to make writing modern Single Page Applications (SPAs) as fast and easy as possible. By default, FastHtml routes return lightweight âpartialsâ that update the DOM directly, rather than reloading the entire page. This makes FastHtml apps potentially faster and more efficient than some JavaScript-heavy approaches."),Ht=c(),$=i("h3"),v=i("a"),at=i("span"),ae=p("#"),se=p("Deployment and Integration"),Ft=c(),X=i("p"),ne=p("You can deploy FastHtml apps just like you would with any other web application, using standard web servers or cloud services. If youâre already using FastAPI, youâll find that FastHtml fits right into your existing workflow, allowing you to create comprehensive web applications without switching between different languages or frameworks."),_t=c(),x=i("h3"),H=i("a"),st=i("span"),oe=p("#"),ie=p("A Growing but Young Project"),Pt=c(),z=i("p"),re=p("Now, itâs important to note that FastHtml is still a young project. While it offers a lot of promise, it doesnât yet have the extensive ecosystem or feature set that frameworks like Django or Flask boast. If you need something with a vast library of plugins or built-in support for complex functionalities, FastHtml might not fully meet your needsâat least not yet. However, the project is growing rapidly, with new features and improvements being added regularly. The community around FastHtml is also expanding, which bodes well for its future."),At=c(),T=i("h3"),F=i("a"),nt=i("span"),le=p("#"),pe=p("Conclusion"),It=c(),w=i("p"),ue=p("In summary, FastHtml is a powerful yet simple framework that allows you to build modern, dynamic web applications using Python. It reduces the need for extensive JavaScript, offers great flexibility, and is rapidly growing both in features and community support. If youâre looking for a lightweight, efficient way to build web apps, FastHtml is definitely worth exploring. Here is a link to their website "),q=i("a"),ce=p("FastHtml"),fe=p(" and "),G=i("a"),me=p("Github"),he=p("."),this.h()},l(t){m=r(t,"H3",{id:!0});var s=l(m);h=r(s,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var ot=l(h);d=r(ot,"SPAN",{});var Fe=l(d);j=u(Fe,"#"),Fe.forEach(e),ot.forEach(e),Nt=u(s,"Introduction"),s.forEac
11h(e),it=f(t),W=r(t,"P",{});var _e=l(W);Ct=u(_e,"If youâre into web development, you might be familiar with the complexities that come with using frameworks like Django or Flask. These frameworks are powerful but often require a lot of boilerplate code, especially when setting up even simple projects. This can be frustrating if you just want to get something up and running quickly, without the hassle of managing models, views, templates."),_e.forEach(e),rt=f(t),_=r(t,"P",{});var St=l(_);qt=u(St,"This is where "),K=r(St,"STRONG",{});var Pe=l(K);Gt=u(Pe,"FastHtml"),Pe.forEach(e),Wt=u(St," steps in. FastHtml is a relatively new web development framework that simplifies the process of building dynamic web applications. Itâs designed for developers who want to use Python to handle both the backend and frontend without needing to dive deep into JavaScript. For instance, if youâre creating a quick dashboard, a prototype, or an interactive report, FastHtml makes it easy to get your project off the ground with minimal setup."),St.forEach(e),lt=f(t),xt(P.$$.fragment,t),pt=f(t),xt(D.$$.fragment,t),ut=f(t),A=r(t,"H3",{id:!0});var de=l(A);y=r(de,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Ae=l(y);Q=r(Ae,"SPAN",{});var Ie=l(Q);Ot=u(Ie,"#"),Ie.forEach(e),Ae.forEach(e),Bt=u(de,"How Does FastHtml Compare to Other Frameworks?"),de.forEach(e),ct=f(t),O=r(t,"P",{});var Ee=l(O);Lt=u(Ee,"FastHtml draws inspiration from FastAPI, particularly in terms of developer experience. If youâre already familiar with FastAPI, youâll find FastHtml extremely comfortable to work with. The main difference is in focus: FastAPI is designed for creating APIs, while FastHtml is tailored for creating HTML-based web applications. If youâre someone who prefers writing Python over JavaScript, FastHtml lets you build modern Single Page Applications (SPAs) without needing to rely heavily on JS frameworks."),Ee.forEach(e),ft=f(t),I=r(t,"H3",{id:!0});var we=l(I);k=r(we,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Se=l(k);V=r(Se,"SPAN",{});var $e=l(V);Rt=u($e,"#"),$e.forEach(e),Se.forEach(e),Yt=u(we,"Frontend Complexity Made Simple"),we.forEach(e),mt=f(t),B=r(t,"P",{});var xe=l(B);Ut=u(xe,"One of the biggest headaches in modern web development is managing the frontend, especially with frameworks like React or Angular. These are powerful but can be overkill for simpler projects, introducing a lot of complexity. FastHtml, on the other hand, uses HTMXâa small JavaScript library that allows you to handle dynamic content directly within your HTML. This means you can create interactive elements like forms or content updates without writing much JavaScript, if any at all. Itâs a great way to manage frontend complexity while keeping your codebase lightweight and easy to maintain."),xe.forEach(e),ht=f(t),E=r(t,"H3",{id:!0});var ye=l(E);g=r(ye,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Te=l(g);tt=r(Te,"SPAN",{});var je=l(tt);Xt=u(je,"#"),je.forEach(e),Te.forEach(e),zt=u(ye,"What Can You Build with FastHtml?"),ye.forEach(e),dt=f(t),L=r(t,"P",{});var De=l(L);Zt=u(De,"FastHtml can be used for general purpose full stack web applications much like what you can build with React or Django, but much more lightweight and you donât have to contact switch between Python and JavaScript. Itâs particularly well-suited for creating quick dashboards, prototypes, and in-company appsâsimilar to what you might use frameworks like Gradio or Streamlit for. Itâs also great for interactive reports, custom blogs, and content-heavy sites where you want some interactive or dynamic features."),De.forEach(e),wt=f(t),R=r(t,"P",{});var Je=l(R);J=r(Je,"A",{href:!0,rel:!0});var Me=l(J);Kt=u(Me,"Image Generation UI"),Me.forEach(e),Je.forEach(e),yt=f(t),xt(M.$$.fragment,t),kt=f(t),Y=r(t,"P",{});var Ne=l(Y);N=r(Ne,"A",{href:!0,rel:!0});var Ce=l(N);Qt=u(Ce,"Hacker News Feed"),Ce.forEach(e),Ne.forEach(e),gt=f(t),xt(C.$$.fragment,t),bt=f(t),S=r(t,"H3",{id:!0});var ke=l(S);b=r(ke,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var qe=l(b);et=r(qe,"SPAN",{});var Ge=l(et);Vt=u(Ge,"#"),Ge.forEach(e),qe.forEach(e),te=u(ke,"Modern Apps with FastHtml"),ke.forEach(e),vt=f(t),U=r(t,"P",{});var We=l(U);ee=u(We,"Whatâs really cool about FastHtml is that itâs not just for traditional multi-page web apps; itâs also designed to make writing modern Single Page Applications (SPAs) as fast and easy as possible. By default, FastHtml routes return lightweight âpartialsâ that update the DOM directly, rather than reloading the entire page. This makes FastHtml apps potentially faster and more efficient than some JavaScript-heavy approaches."),We.forEach(e),Ht=f(t),$=r(t,"H3",{id:!0});var ge=l($);v=r(ge,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Oe=l(v);at=r(Oe,"SPAN",{});var Be=l(at);
11ae=u(Be,"#"),Be.forEach(e),Oe.forEach(e),se=u(ge,"Deployment and Integration"),ge.forEach(e),Ft=f(t),X=r(t,"P",{});var Le=l(X);ne=u(Le,"You can deploy FastHtml apps just like you would with any other web application, using standard web servers or cloud services. If youâre already using FastAPI, youâll find that FastHtml fits right into your existing workflow, allowing you to create comprehensive web applications without switching between different languages or frameworks."),Le.forEach(e),_t=f(t),x=r(t,"H3",{id:!0});var be=l(x);H=r(be,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Re=l(H);st=r(Re,"SPAN",{});var Ye=l(st);oe=u(Ye,"#"),Ye.forEach(e),Re.forEach(e),ie=u(be,"A Growing but Young Project"),be.forEach(e),Pt=f(t),z=r(t,"P",{});var Ue=l(z);re=u(Ue,"Now, itâs important to note that FastHtml is still a young project. While it offers a lot of promise, it doesnât yet have the extensive ecosystem or feature set that frameworks like Django or Flask boast. If you need something with a vast library of plugins or built-in support for complex functionalities, FastHtml might not fully meet your needsâat least not yet. However, the project is growing rapidly, with new features and improvements being added regularly. The community around FastHtml is also expanding, which bodes well for its future."),Ue.forEach(e),At=f(t),T=r(t,"H3",{id:!0});var ve=l(T);F=r(ve,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Xe=l(F);nt=r(Xe,"SPAN",{});var ze=l(nt);le=u(ze,"#"),ze.forEach(e),Xe.forEach(e),pe=u(ve,"Conclusion"),ve.forEach(e),It=f(t),w=r(t,"P",{});var Z=l(w);ue=u(Z,"In summary, FastHtml is a powerful yet simple framework that allows you to build modern, dynamic web applications using Python. It reduces the need for extensive JavaScript, offers great flexibility, and is rapidly growing both in features and community support. If youâre looking for a lightweight, efficient way to build web apps, FastHtml is definitely worth exploring. Here is a link to their website "),q=r(Z,"A",{href:!0,rel:!0});var Ze=l(q);ce=u(Ze,"FastHtml"),Ze.forEach(e),fe=u(Z," and "),G=r(Z,"A",{href:!0,rel:!0});var Ke=l(G);me=u(Ke,"Github"),Ke.forEach(e),he=u(Z,"."),Z.forEach(e),this.h()},h(){n(h,"class","heading-link"),n(h,"title","Permalink"),n(h,"aria-hidden","true"),n(h,"href","#introduction"),n(m,"id","introduction"),n(y,"class","heading-link"),n(y,"title","Permalink"),n(y,"aria-hidden","true"),n(y,"href","#how-does-fasthtml-compare-to-other-frameworks"),n(A,"id","how-does-fasthtml-compare-to-other-frameworks"),n(k,"class","heading-link"),n(k,"title","Permalink"),n(k,"aria-hidden","true"),n(k,"href","#frontend-complexity-made-simple"),n(I,"id","frontend-complexity-made-simple"),n(g,"class","heading-link"),n(g,"title","Permalink"),n(g,"aria-hidden","true"),n(g,"href","#what-can-you-build-with-fasthtml"),n(E,"id","what-can-you-build-with-fasthtml"),n(J,"href","https://github.com/AnswerDotAI/fasthtml-example/tree/main/image_app_simple"),n(J,"rel","nofollow"),n(N,"href","https://github.com/AnswerDotAI/fasthtml-example/tree/main/hacker_news_reskin"),n(N,"rel","nofollow"),n(b,"class","heading-link"),n(b,"title","Permalink"),n(b,"aria-hidden","true"),n(b,"href","#modern-apps-with-fasthtml"),n(S,"id","modern-apps-with-fasthtml"),n(v,"class","heading-link"),n(v,"title","Permalink"),n(v,"aria-hidden","true"),n(v,"href","#deployment-and-integration"),n($,"id","deployment-and-integration"),n(H,"class","heading-link"),n(H,"title","Permalink"),n(H,"aria-hidden","true"),n(H,"href","#a-growing-but-young-project"),n(x,"id","a-growing-but-young-project"),n(F,"class","heading-link"),n(F,"title","Permalink"),n(F,"aria-hidden","true"),n(F,"href","#conclusion"),n(T,"id","conclusion"),n(q,"href","https://fastht.ml/"),n(q,"rel","nofollow"),n(G,"href","https://github.com/AnswerDotAI/fasthtml/tree/main"),n(G,"rel","nofollow")},m(t,s){o(t,m,s),a(m,h),a(h,d),a(d,j),a(m,Nt),o(t,it,s),o(t,W,s),a(W,Ct),o(t,rt,s),o(t,_,s),a(_,qt),a(_,K),a(K,Gt),a(_,Wt),o(t,lt,s),Tt(P,t,s),o(t,pt,s),Tt(D,t,s),o(t,ut,s),o(t,A,s),a(A,y),a(y,Q),a(Q,Ot),a(A,Bt),o(t,ct,s),o(t,O,s),a(O,Lt),o(t,ft,s),o(t,I,s),a(I,k),a(k,V),a(V,Rt),a(I,Yt),o(t,mt,s),o(t,B,s),a(B,Ut),o(t,ht,s),o(t,E,s),a(E,g),a(g,tt),a(tt,Xt),a(E,zt),o(t,dt,s),o(t,L,s),a(L,Zt),o(t,wt,s),o(t,R,s),a(R,J),a(J,Kt),o(t,yt,s),Tt(M,t,s),o(t,kt,s),o(t,Y,s),a(Y,N),a(N,Qt),o(t,gt,s),Tt(C,t,s),o(t,bt,s),o(t,S,s),a(S,b),a(b,et),a(et,Vt),a(S,te),o(t,vt,s),o(t,U,s),a(U,ee),o(t,Ht,s),o(t,$,s),a($,v),a(v,at),a(at,ae),a($,se),o(t,Ft,s),o(t,X,s),a(X,ne),o(t,_t,s),o(t,x,s),a(x,H),a(H,st),a(st,oe),a(x,ie),o(t,Pt,s),o(t,z,s),a(z,re),o(t,At,s),o(t,T,s),a(T,F),a(F,nt),a(nt,le),a(T,pe),o(t,It,s),o(t,w,s),a(w,ue),a(w,q),a(q,ce),a(w,fe),a(w,G),a(G,me),a(w,he),Et=!0},p(t,[s]){const ot={};s&1&&(ot.$$scope={dirty:s,ctx:t}),P.$set(ot)},i(t){Et||(jt(P.$$.fragment,t),jt(D.$$.fragment,t),jt(M.$$.fragment,t),jt(C.$$.fragment,t),Et=!0)},o(t){Dt(P.$$.fragment,t),Dt(D.$$.fragment,t),Dt(M.$$.fragment,t),Dt(C.$$.fragment,t),Et=!1},d(t){t&&e(m),t&&e(it),t&&e(W),t&&e(rt),t&&e(_),t&&e(lt),Jt(P,t),t&&e(pt),Jt(D,t),t&&e(ut),t&&e(A),t&&e(ct),t&&e(O),t&&e(ft),t&&e(I),t&&e(mt),t&&e(B),t&&e(ht),t&&e(E),t&&e(dt),t&&e(L),t&&e(wt),t&&e(R),t&&e(yt),Jt(M,t),t&&e(kt),t&&e(Y),t&&e(gt),Jt(C,t),t&&e(bt),t&&e(S),t&&e(vt),t&&e(U),t&&e(Ht),t&&e($),t&&e(Ft),t&&e(X),t&&e(_t),t&&e(x),t&&e(Pt),t&&e(z),t&&e(At),t&&e(T),t&&e(It),t&&e(w)}}}const pa={slug:"introducing-fasthtml",title:"Introducing FastHtml",date:"2024-08-15T12:00:00.000Z",excerpt:"FastHtml is a new Python-based web framework that streamlines the process of building dynamic web applications by minimizing the need for JavaScript, perfect for quick dashboards, prototypes, and interactive reports.",coverImage:"/images/posts/fasthtml-cover.png",tags:["Web Development","Python","FastHtml","HTMX","FastAPI"]};class ua extends Qe{constructor(m){super(),Ve(this,m,null,na,ta,{})}}export{ua as default,pa as metadata};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.