Ooui-tws-port/README.md

190 lines
5.0 KiB
Markdown
Raw Normal View History

2017-12-10 02:03:49 +00:00
# Ooui Web Framework <img src="https://github.com/praeclarum/Ooui/raw/master/Documentation/Icon.png" height="32"> [![Build Status](https://www.bitrise.io/app/86585e168136767d/status.svg?token=G9Svvnv_NvG40gcqu48RNQ)](https://www.bitrise.io/app/86585e168136767d)
2017-11-29 03:52:24 +00:00
| Version | Package | Description |
| ------- | ------- | ----------- |
| [![NuGet Package](https://img.shields.io/nuget/v/Ooui.svg)](https://www.nuget.org/packages/Ooui) | [Ooui](https://www.nuget.org/packages/Ooui) | Core library with HTML elements and a server. |
| [![NuGet Package](https://img.shields.io/nuget/v/Ooui.Forms.svg)](https://www.nuget.org/packages/Ooui.Forms) | [Ooui.Forms](https://www.nuget.org/packages/Ooui.Forms) | Xamarin.Forms backend using Ooui |
| [![NuGet Package](https://img.shields.io/nuget/v/Ooui.AspNetCore.svg)](https://www.nuget.org/packages/Ooui.AspNetCore) | [Ooui.AspNetCore](https://www.nuget.org/packages/Ooui.AspNetCore) | Integration with ASP.NET Core MVC |
2017-06-14 02:39:36 +00:00
2017-06-13 19:33:06 +00:00
Ooui (pronounced *weeee!*) is a small cross-platform UI library for .NET that uses web technologies.
It presents a classic object-oriented UI API that controls a dumb browser. With Ooui, you get the full power of your favorite .NET programming language *plus* the ability to interact with your app using any device.
2017-06-13 19:02:57 +00:00
2017-06-17 00:59:35 +00:00
## Try it Online
2017-11-16 05:51:02 +00:00
Head on over to [http://ooui.mecha.parts](http://ooui.mecha.parts) to tryout the samples.
2017-06-17 00:59:35 +00:00
## Try the Samples Locally
2017-06-16 23:02:38 +00:00
```bash
git clone git@github.com:praeclarum/Ooui.git
cd Ooui
2017-06-14 01:10:37 +00:00
dotnet restore
dotnet run --project Samples/Samples.csproj
```
2017-06-16 23:02:38 +00:00
Now point your browser at [http://localhost:8080/shared-button](http://localhost:8080/shared-button)
You should see a button that tracks the number of times it was clicked.
The source code for that button is shown in the example below.
2017-06-14 01:10:37 +00:00
2017-06-17 00:59:35 +00:00
## Example Use
2017-06-14 01:10:37 +00:00
2017-06-16 23:02:38 +00:00
Here is the complete source code to a fully collaborative button clicking app.
2017-06-13 19:02:57 +00:00
```csharp
2017-06-16 23:02:38 +00:00
using System;
2017-06-13 19:02:57 +00:00
using Ooui;
2017-06-16 23:02:38 +00:00
class Program
{
static void Main(string[] args)
{
// Create the UI
var button = new Button("Click me!");
// Add some logic to it
var count = 0;
button.Click += (s, e) => {
2017-06-16 23:02:38 +00:00
count++;
button.Text = $"Clicked {count} times";
};
// Publishing makes an object available at a given URL
// The user should be directed to http://localhost:8080/button
UI.Publish ("/shared-button", button);
// Don't exit the app until someone hits return
Console.ReadLine ();
}
}
```
2017-06-13 19:02:57 +00:00
2017-06-16 23:02:38 +00:00
Make sure to add a reference to Ooui before you try running!
2017-06-13 19:02:57 +00:00
2017-06-16 23:02:38 +00:00
```bash
dotnet add package Ooui
2017-06-13 19:02:57 +00:00
```
2017-06-16 23:02:38 +00:00
With just that code, the user will be presented with a silly counting button.
2017-06-13 19:33:06 +00:00
In fact, any number of users can hit that URL and start interacting with the same button. That's right, automatic collaboration!
2017-06-13 19:02:57 +00:00
2017-06-16 23:02:38 +00:00
If you want each user to get their own button, then you will instead `Publish` a **function** to create it:
2017-06-13 19:02:57 +00:00
```csharp
2017-06-16 23:02:38 +00:00
Button MakeButton()
{
var button = new Button("Click me!");
2017-06-13 19:02:57 +00:00
var count = 0;
button.Click += (s, e) => {
2017-06-13 19:02:57 +00:00
count++;
button.Text = $"Clicked {count} times";
};
return button;
}
UI.Publish("/button", MakeButton);
```
2017-06-13 19:33:06 +00:00
Now every user (well, every load of the page) will get their own button.
2017-06-13 19:02:57 +00:00
2017-06-16 23:02:38 +00:00
2017-06-13 19:02:57 +00:00
## How it works
2017-06-13 19:33:06 +00:00
When the user requests a page, Ooui will connect to the client using a Web Socket. This socket is used to keep an in-memory model of the UI (the one you work with as a programmer) in sync with the actual UI shown to the user in their browser. This is done using a simple messaging protocol with JSON packets.
2017-06-13 19:02:57 +00:00
2017-06-13 19:33:06 +00:00
When the user clicks or otherwise interacts with the UI, those events are sent back over the web socket so that your code can deal with them.
2017-06-13 19:02:57 +00:00
## Comparison
<table>
<thead><tr><th>UI Library</th><th>Ooui</th><th>Xamarin.Forms</th><th>ASP.NET MVC</th></tr></thead>
<tr>
<th>How big is it?</th>
2017-06-19 07:20:43 +00:00
<td>50 KB</td>
2017-06-16 23:02:38 +00:00
<td>650 KB</td>
<td>1,300 KB</td>
2017-06-13 19:02:57 +00:00
</tr>
<tr>
<th>Where does it run?</th>
<td>Everywhere</td>
<td>iOS, Android, Mac, Windows</td>
2017-06-17 00:55:23 +00:00
<td>Everywhere</td>
2017-06-13 19:02:57 +00:00
</tr>
<tr>
<th>How do I make a button?</th>
<td><pre>new Button()</pre></td>
<td><pre>new Button()</pre></td>
<td><pre>&lt;button /&gt;</pre></td>
</tr>
<tr>
<th>Does it use native controls?</th>
<td>No, HTML5 controls</td>
<td>Yes!</td>
<td>HTML5 controls</td>
</tr>
<tr>
<th>What controls are available?</th>
<td>All of those in HTML5</td>
<td>Xamarin.Forms controls</td>
<td>All of those in HTML5</td>
</tr>
<tr>
<th>Which architecture will you force me to use?</th>
<td>None, you're free</td>
<td>MVVM</td>
<td>MVC/MVVM</td>
</tr>
<tr>
<th>What's the templating language?</th>
<td>C#</td>
<td>XAML</td>
<td>Razor</td>
</tr>
<tr>
<th>How do I style things?</th>
2017-06-17 00:55:23 +00:00
<td>CSS baby! (soon)</td>
2017-06-13 19:02:57 +00:00
<td>XAML resources</td>
<td>CSS</td>
</tr>
<tr>
<th>Is there databinding?</th>
<td>No :-(</td>
<td>Yes!</td>
<td>Debatable</td>
</tr>
<tr>
<th>Do I need to run a server?</th>
<td>Nope</td>
<td>Heck no</td>
<td>Yes</td>
</tr>
<tr>
<th>Is it web scale?</th>
2017-06-17 00:55:23 +00:00
<td>Yes?</td>
2017-06-13 19:02:57 +00:00
<td>What's the web?</td>
2017-06-17 00:55:23 +00:00
<td>Yes!</td>
2017-06-13 19:02:57 +00:00
</tr>
</table>