Show Off: Crossplatform UI Framework + Thank You to SkiaSharp

BrettBarrettBrettBarrett USMember ✭✭
edited November 2017 in SkiaSharp

After almost a years worth of part time work, I now have my cross platform, react native like UI framework in a state where I could "Show Off". There is likely another years worth of polish and feature additions needed before I could publish my work. Still fun to show off at this stage.

Thank you to the SkiaSharp team for making it a reality since the libraries availability is what started the dream which is becoming reality.

The Dream:

  • Ability to write applications in .NET Standard 2.0 C# code which could run cross platform on Android, iOS(powered by Xamarin) and Windows, Mac, Linux (powered by .NET core).
  • Tired of MvvM and bindings.... Drinking the "React style functional composition based component architecture" koolaid.
  • Tired of coding UI's in different languages. (XAML/CS) or (HTML/JS)
  • Developer first KISS/'cut the fat' based principles and design.

The Progress:

  • Scheduler for Building, Layout, and Rendering Components.
  • Component based build process. Similar to 'flutter' Build or how 'React' uses the Render function.
  • Facebook YOGA based flexbox component layout.
  • SkiaSharp Renderer and Compositor. (Rendering, Clipping)
  • Full SVG Rendering Capability
  • Bubble and Tunnel Events (Click/Touch, Keyboard, mousewheel) and 'focus'
  • Basic Components (Checkbox, ToggleBox, TextBlock, TextBox, ScrollBox, Rows, Columns)
  • Interface projects for routing Xamarin.Forms and Winforms host to the UI Framework.
  • Theme Support

The Todo List:

  • Animation
  • Gestures
  • Some more basic component implementation and fleshing out ones I have.
  • Advanced text layout concepts. This is a big problem for me right now since proper text layout engine is tough to build and cant find an existing engine in c# or cross-platform implementation with c# bindings.
  • Complete interface wrappers for additional functionality.

The Pictures:

Customer View:

Developer View:

Posts

  • BrettBarrettBrettBarrett USMember ✭✭

    Here is a tiny video for a debug test bed as well: https://brettclutch.tinytake.com/sf/MjEwODEzOF82NjAzNjMw

  • Very nice!

  • voidvoid DKBeta ✭✭✭
  • AndyDentAndyDent AUMember ✭✭

    Firstly, massive congratulations - I've written a cross-platform framework before, actually more of a port, where I escaped some of the heavy lifting by using the internals of MFC underneath. (Yes it was that long ago!).

    I'm very interested in your progress, not just because of my decades of cross-platform framework use but also a big fan of SkiaSharp - I used it for our RealmDraw sample and since in my other projects.

    I'm not a believer in following heavy architectures for their own sake but I suggest you think twice about throwing our Binding alongside MVVM. The two are not inextricably linked and building in some binding mechanism can make a framework vastly easier to use. Binding is one of those inescapable things - if you don't provide a way to do it then people are doomed to somehow copy data around.

    Are you looking for a text layout engine or a word processing/editor control or both? They are very different things.

    For the sake of accessibility, I suggest trying to use native entry controls wherever possible.

  • BrettBarrettBrettBarrett USMember ✭✭

    AndyDent,

    Thanks. Not sure if you have read the react literature but react basically replaces bindings with another approach, now considered the 'react' way of thinking. Its basically an alternative implementation to solving the problems we traditionally have used bindings for. So they should not be needed.

    I'm still looking for a text layout engine, I'm off the belief I'll need to role my own unfortunately since I can't find a cross platform one what would be usable from c#. Which means I'll likely just have simple/basic English text formatting with some limited options.

    I plan to in the middle of 2018 or earlier depending on progress post a link to github with the above released as an open source project. There is still a lot changing in the hood to open source it now but I'm definitely "getting there".

  • blazespinnakerblazespinnaker CAMember

    Brett, can you be more specific about the "other approach"? There is two way binding in React, AFAIK.

  • BrettBarrettBrettBarrett USMember ✭✭
    edited January 28

    Sorry for the delay. Two way bindings in react are used very seldom used. React works on the concept of one way data flow and not bindings, where in react you re-render the entire app top to bottom and only update things that have 'changed' (one way). Yes there is event hook ups but I don't consider that bindings.

    Simple example:

    • You want a textbox label to be equal to the name the customer just typed in and pressed 'submit'.

    Bindings Approach:

    • Bind the label.text to the textbox.text. The binding engine takes care of making sure the two update. You actually have to take special care to setup bindings so that it would only update as 'submit' is pressed.

    React Approach:

    • The textbox.text is set to the backing variable in the render function. The render function gets called to re-render the entire app as the user presses 'submit' (You manually wire this up). React 'smartly' diffs the two renders and only changes the DOM based on whats actually changed.

    Hopefully that helps to clarify the approach taken.

    As a side note, development has continued and I will be looking to open source this project in the next 3 to 6 months. By then webassembly + mono will have taken over as the go to UI rendering approach by then and this project wont be important at that point but still had fun building it.

  • GaryMcGheeGaryMcGhee AUMember ✭✭
    edited March 15

    I've used binding in XAML, Adobe Flex and Ember.js, and read about the binding systems in MVVMCross. XAML would have to be the poorest example of binding :

    • its verbosity
    • making properties bindable is ugly, unless you use PropertyChanged.Fody
    • you have to write converters for even simple things
    • binding code to code (without XAML) should be easier
    • binding to multiple dependent properties eg. fullname to firstname and lastname
    • oh, and you can only attach event handlers from the code-behind, not the BindingContext/ViewModel - you need commands for that, which are ugly.

    Binding templates have the advantage of being simple and readable for designers, and for when you come back into your own code after years.

    So I'm undecided about whether the React way is superior for app development (perhaps its easier to implement), but please don’t write off binding with XAML as your only example.

    eg. checkout :

    Also, MVVM made sense in the old days of Xamarin, where there was potentially a different page View for each platform. With Xamarin Forms, we only have one View per page, so it seems like one too many letters. MVC might actually make sense now.

    Perhaps if the BindingContext was set to the View instead of the VM, and there was a standard Model property that was set by the framework,
    we’d be able to do either {{Binding ViewState}} or {{Binding Model.Name}} and some of the problems would go away.

    MVVMCross + SkiaSharp without XF could be fun too, but then it comes down to the UI component architecture.

    I hope the Xamarin team are looking ahead to beyond XAML, and after spending a day with SkiaSharp and reading about Flutter, this seems like an obvious thing to do, just to keep up.

Sign In or Register to comment.