fastn vs React, Angular and Javascript
fastn is a no-fuss alternative to the complexities of React, Angular, and
JavaScript. Here is a quick glance.
Very Easy Syntax
fastn simplifies programming making it accessible to everyone.
Developers, designers, and non-programmers alike can easily learn fastn to build
stunning web projects.
Its **user-friendly interface and minimal syntax** allow even those with no
prior programming experience to grasp its functionalities swiftly.
Take the below examples for instance.
Example 1
Input
-- chat-female-avatar: Hello World! 😀
-- chat-female-avatar:
I'm Nandhini, a freelance content writer.
-- chat-female-avatar:
Fun fact: I also built this entire page with fastn! 🚀
It's that easy!
Lang:
ftd
Output
Hello World! 😀
I'm Nandhini, a freelance content writer.
Fun fact: I built this entire page with fastn! 🚀
It's that easy!
Example 2
Input
-- quote.rustic: Nandhini
It's liberating to control the outcome as the creator. I can swiftly bring
changes to life without delay or intermediaries.
Lang:
ftd
Output
It's liberating to control the outcome as the creator. I can swiftly bring
changes to life without delay or intermediaries.
Nandhini
Example 3
Input
-- boolean $show-modal: false
-- modal-cover.button: Click to Open
$on-click$: $ftd.toggle($a = $show-modal)
disable-link: true
-- modal-cover.modal-cover: fastn fun-fact
$open: $show-modal
**`If you can type, you can code!`**
Lang:
ftd
Output
As evident, the language is effortlessly comprehensible to everyone. This
fosters smooth collaboration among developers, designers, and content creators,
ultimately boosting the efficiency of the entire project.
Rich collection of readymade components
fastn's versatility accommodates a wide range of projects, from landing pages to
complex web applications, giving startups the agility they need to adapt and
evolve.
You can choose from numerous components that suit your needs.
There are [doc-sites](https://fastn.com/featured/doc-sites/),
[blogs](https://fastn.com/featured/blog-templates/),
[landing pages](https://fastn.com/featured/landing-pages/)
to individual component library like [bling](https://fastn-community.github.io/bling/),
[hero sections](https://fastn.com/featured/sections/heros/), and more.
The best part? All components in the ecosystem adhere to a unified design
system. This ensures that every component blends seamlessly with others,
creating a cohesive look and feel across your entire site.
Create your own custom component
From buttons that seamlessly blend with your design to interactive elements that
engage users, fastn makes component creation intuitive and efficient.
Creating a custom component
-- toggle-text: fastn is cool!
-- component toggle-text:
boolean $current: false
caption title:
-- ftd.text: $toggle-text.title
align-self: center
color if { toggle-text.current }: $inherited.colors.cta-primary.disabled
color: $inherited.colors.cta-primary.text
role: $inherited.types.heading-tiny
background.solid: $inherited.colors.cta-primary.base
padding.px: 20
border-radius.px: 5
$on-click$: $ftd.toggle($a = $toggle-text.current)
-- end: toggle-text
Lang:
ftd
Output
fastn is cool!
Content Components
In fastn, you can create custom content components for recurring information.
This ensures a consistent user experience throughout your website while saving
your time.
Functional Components
fastn's dynamic features lets you create engaging user experiences that capture
and retain customer interest.
Event Handling Made Simple
We've got a range of built-in events in fastn. Handle clicks, mouse actions,
and more. fastn’s event handling capabilities can be used to create fully
functional frontend applications.
Input
-- boolean $show: false
-- ftd.text: Enter mouse cursor over me
$on-mouse-enter$: $ftd.set-bool($a = $show, v = true)
$on-mouse-leave$: $ftd.set-bool($a = $show, v = false)
-- ftd.text: Hide and Seek
if: { show }
Lang:
ftd
Output
Enter mouse cursor over me
Built-in Rive
Elevate your website's visual appeal with built-in Rive animations. Easily embed
animations into your fastn documents for engaging user experiences.
Input
-- string $idle: Unknown Idle State
-- ftd.text: $idle
-- ftd.rive:
id: vehicle
src: https://cdn.rive.app/animations/vehicles.riv
autoplay: false
artboard: Jeep
$on-rive-play[idle]$: $ftd.set-string($a = $idle, v = Playing Idle)
$on-rive-pause[idle]$: $ftd.set-string($a = $idle, v = Pausing Idle)
-- ftd.text: Idle/Run
$on-click$: $ftd.toggle-play-rive(rive = vehicle, input = idle)
Lang:
ftd
Output
Unknown Idle State
Idle/Run
Full stack framework
Along with [building frontends](https://fastn.com/frontend/), `fastn` can be
used for building data driven websites and dashboards.
Seamless API Integration
You can interact with backend APIs, and use the API responses to
- Create dynamic web pages,
- Display and render the response data
- Conditional Rendering. etc.
Checkout the [http processor](https://fastn.com/http/) to know more.
fetching data from API
-- import: fastn/processors as pr
-- result r:
$processor$: pr.http
url: https://api.github.com/search/repositories
sort: stars
order: desc
q: language:python
Lang:
ftd
Effortless SQL Interaction
Query data from SQLite databases to create dynamic websites.
Our [package query processor](https://fastn.com/package-query/) makes it a
breeze.
Working With SQL Is Breeze
-- import: fastn/processors as pr
-- people:
$processor$: pr.package-query
db: db.sqlite
SELECT * FROM user;
-- show-person: $p
for: $p in $people
Lang:
ftd
Opinionated Design System
fastn comes with integrated design system. We've many pre-made design choices
so you can build your website quickly.
Unified Color and Typography
A lot of [color scheme](/featured/cs/) and
[typography](featured/fonts-typography/) packages are available, which you can
import and change the entire typography or color scheme in a few lines of code.
You can manage color palettes and typography centrally to save time and ensure
consistent usage across your website.
fastn Colour Schemes
fastn Typography
Seamless Figma Integration
Integrate Figma tokens with **`fastn`**'s color scheme or create your own scheme
from Figma JSON.
Using Figma tokens with fastn colour scheme
Responsive Ready
fastn has built in support for responsive design. Your creations automatically
adapt to the perfect size, whether your users are on mobile or desktop devices.
Search Engine Optimization
Custom and Clean URLs
fastn allows you to map documents to any URL you like, allowing you to make all
your URLs clean, and folders organised! You can also create dynamic URLs in
fastn.
Optimized Meta Information
Easily manage meta tags and descriptions with fastn. You can fine-tune
how your web pages appear in search engine results and increase your site's
discoverability. You can also add OG-Image to your page and control the
preview of your page link when shared across social platforms.
Adding meta title, description and image
-- ds.page: This is page title
document-title: Welcome!
document-description: Learn how to do SEO! document-image: https://gargajit.github.io/optimization/images/seo-meta.png
Lang:
ftd
URL Redirection
Effortlessly create URL redirections to improve navigation and link consistency,
ensuring that your users always find the right content, even when URLs change.
URL Redirection: `FASTN.ftd` example that uses `fastn.redirects`
-- import: fastn
-- fastn.package: redirect-example
-- fastn.redirects:
/ftd/kernel/: /kernel/
/discord/: https://discord.gg/eNXVBMa4xt
Lang:
ftd
Visualize with Vercel
Preview and test your website's appearance and functionality before deployment.
Preview your page before deployment
Why fastn is the best choice for your startup
Stability Guarantee
React, JavaScript often undergo rapid changes which leads to constant
relearning and updates. fastn's stability guarantees a consistent development
environment, saving startups from the constant disruptions of rapidly
changing technologies.
Architectural Decisions Made for you
With fastn, architectural decisions are simplified. We've pre-made many design
choices for you, from color schemes to typography roles, allowing you to focus
on building your project.
Ecosystem Compatibility
Unlike traditional languages that often lock you into specific ecosystems, fastn
is versatile and works well with various backend technologies and frameworks.
Cost-Efficiency
fastn enables novice developers to make meaningful contributions. Cut costs by
utilizing a technology that's easy to learn, helping your startup achieve more
with less.
With fastn's easy learning curve, you can save on hiring costs by enabling
developers of varying levels to efficiently create and manage your web presence.
Get Started with fastn
Install fastn with a Single Command
curl -fsSL https://fastn.com/install.sh | bash
Lang:
sh
