Getting Started

Getting Started with The Pheasant Framework

The Pheasant Framework is a revolutionary framework used for making modern web applications, and it has been designed in order to make the framework as easy to use as possible, while making functionality that makes your web application as powerful as possible.

Prerequisites

In order to make use of this framework, like every other framework, you will need to know the basics of web development such as HTML and CSS.

You will need to know either JavaScript or Dart to make use of this framework. Dart is still recommended because the framework is originally implemented in the Dart Language, and it will be the language to use if you are planning to make plugins or other third-party packages or libraries to augment the framework.

Making Your First App

Making your first app is as easy as possible.

If you have the pheasant cli - pheasant - installed on your system, simply run the following command and answer the prompts.

pheasant init first-app

For this demo app, you can set all responses to "NO", as we will not be making use of any other supporting technology.

Once you have done this, you can go to the entry of the application, which is the App.phs file located in the lib directory, and clear everything there.

In lib/App.phs, write the following code:

<script>
var name = "Joseph";
</script>

<template>
<p id="hello">Hello, my name is {{name}}.</p>
</template>

<style>
#hello {
    color: black;
}
</style>

Once you have done this, in the project directory run pheasant run. This should serve the application on http://localhost:8080. You should see the text "Hello, my name is Joseph." written in black.

How did it work?

In every pheasant component file, there are three parts to it: the script, which contains any dart code you would need to run the application; the template, which contains html empowered with pheasant code to help "bring your dart into your html"; and style, which contains styles which are, by default, scoped locally to the component. Before we get into learning how pheasant works, let's break down the example we've had here.

<script>
var name = "Joseph";
</script>

This is the script part of the file. You can see here that we do not need to write any fancy routes in order to make this declaration. You can just write code as normal. Here, we declared a variable named name with a value of "Joseph".

<template>
<p id="hello">Hello, my name is {{name}}.</p>
</template>

This is the template part of the file. You can see here that we have a simple paragraph element that prints out "Hello, my name is {{name}}". In Pheasant we make use of double braces ({{}}) when we want to compute a value in our code. This could either be getting the value of a variable, as it is in this example, or the value of a function or anything similar. Ensure to use double braces when getting the value of a variable (if you're interested, here's why)

<style>
#hello {
    color: black;
}
</style>