www.what-could-possibly-go-wrong.com Open in urlscan Pro
2606:4700:7::60  Public Scan

Form analysis
1 forms found in the DOM

Name: mc-embedded-subscribe-form — POST //the-data-wrangler.us4.list-manage.com/subscribe/post?u=012dc750eaea98cf798baad12&id=2bb4a2a599

<form action="//the-data-wrangler.us4.list-manage.com/subscribe/post?u=012dc750eaea98cf798baad12&amp;id=2bb4a2a599" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank"
  novalidate="novalidate">
  <div id="mc_embed_signup_scroll">
    <span class="mc-field-group">
      <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" style="height: 2em !important; width: 90%;" placeholder="Enter your email" aria-required="true">
    </span>
    <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" style="height: 2.8em; width: auto;">
    <div for="mce-EMAIL" class="mce_inline_error" style="display:none"></div>
    <div id="mce-responses" class="clear">
      <div class="response" id="mce-error-response" style="display:none"></div>
      <div class="response" id="mce-success-response" style="display:none"></div>
    </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_012dc750eaea98cf798baad12_2bb4a2a599" tabindex="-1" value=""></div>
  </div>
</form>

Text Content

MENU

Close
 * Home
 * Learn
 * About
 * Support
 * Contact

Menu
Scroll Down


BRINGING MVVM TO UNITY - PART 1: ABOUT MVVM AND UNITY-WELD

6 Feb 2017

Do you need a better way to structure your Unity UI and reduce complexity? Are
you looking for a cohesive way to coordinate the multiple parts of your UI?

Let me introduce Unity-Weld: an open source implementation of the MVVM design
pattern that will help you to structure your Unity UI.

Unity-Weld is the glue between the Unity hierarchy and the code that implements
your UI logic. It binds together the parts of your UI: it coordinates them and
allows them to communicate. Best of all Unity-Weld is simple: simple to learn
and simple to use. It works well with Unity and feels like it fits with Unity's
UI system.

In this series of articles I show you how to use Unity-Weld to take advantage of
MVVM in your own Unity UIs.

In part 1 I cover some background, explaining what MVVM is and why you should
use it.

Unity-Weld is available on github.


CONTENTS

Generated with DocToc

 * Contents
 * Do I need to know about MVVM to use Unity-Weld?
 * So what is MVVM?
 * Why MVVM?
 * MVVM for Unity
 * Conclusion


DO I NEED TO KNOW ABOUT MVVM TO USE UNITY-WELD?

No you don't need to have used MVVM before to take advantage of Unity-Weld. I'll
explain everything you need to know in this series of articles.

If you already have some experience with MVVM then you'll be able to skip or
skim some of the sections in part 1.


SO WHAT IS MVVM?

MVVM or model-view-view-model is a design pattern and a method of structuring
your UI that promotes a clean organisation and helps us achieve unit-testing.
I'd argue that MVVM, in the context of a Unity application, really helps us tie
together and organise all the disparate scripts that are normally scattered
throughout the hierarchy. It's a way of formalising and structuring the
communication that happens between components, something that can otherwise
easily evolve in a haphazard and inconsistent way.

MVVM nicely separates your UI rendering (the view) from your UI logic (the
view-model):



It is this separation that allows for the code isolation that you need for
automated testing of your UI logic.

MVVM also allows for separate views on the same UI logic, simply by wiring
multiple views to a single view-model instance:



There are two main aspects of MVVM. The first is data-binding which forms a
connection between properties of your view-model and your view. Changes on
either side of the connection automatically propagate to the other:



The other aspect of MVVM is event-based programming, where the view raises
events (triggered by user action) that are then handled by the view-model:



MVVM is commonly associated with Windows Presentation Foundation (or WPF) and
that might be how you have heard of it. However the design pattern itself has
roots going back to the presentation model pattern and the
MVC pattern.

The MVC pattern has many variants. So is it correct that I describe Unity-Weld
as an implementation of MVVM? Well I have been inspired by and continue to be
inspired by the MVVM pattern that underlies WPF. New patterns get created all
the time as they are evolved to handle new situations and purposes. From my
perspective Unity-Weld is a direct descendent of MVVM even though it differs in
implementation from what has come before.


WHY MVVM?

It has been said that the primary purpose of MVVM is to enable test driven
development and unit-testing for UI logic. Correct implementation of MVVM
certainly makes this possible and I would even say straight-forward to create
automated tests for UI logic, something that, in times past, has been considered
difficult if not impossible. So TDD has been a major selling point for MVVM.

However I would argue other benefits, especially when it comes to working with
Unity. So if TDD isn't your thing, I still think you can gain substantial
benefits from using MVVM. For a start it brings about positive changes to your
application design. It makes for an elegant structure with a good clean
separation between UI rendering/control and UI logic.

Typically a Unity application is composed of a complex hierarchy with numerous
scripts attached and scattered throughout. These scripts must communicate and
work together to form a functional UI. MVVM can be used to consolidate and tie
together your particular collection of scripts and form them into a cohesive
whole.

As mentioned already, a beneficial side effect of MVVM is that you can have
multiple views connected to a single view-model and automatically synchronized
via MVVM. When you update the view-model, all connected views automatically stay
updated.


MVVM FOR UNITY

Unity-Weld allows you to wire up your view-model to your view via the Unity
hierarchy. Our view-models can be MonoBehaviours or they can be a pure C#
classes. Our views are Unity components, such as InputField and Button that are
added to the hierarchy. We must then add extra components such as
OneWayPropertyBinding, TwoWayPropertyBinding and EventBinding that take care of
the connections between views and view-models. Unity-Weld then automatically
maintains synchronisation between view-model and view for us. The glue between
the properties is what is commonly known as data-binding. We have given the name
event-binding to the glue between UI events and view-model functions.

When building applications with Unity we have one main mechanism at our disposal
for structuring an application. That is Unity's implementation of the entity
component system pattern. Whilst that's a useful pattern we usually need more to
structure a complex application. I've discussed dependency injection previously
and that's one part of this puzzle. MVVM is another part. These patterns
together help us to make sense of and relate the mess of scripts and game
objects that make up your game. Dependency injection and MVVM create a
structural backbone for your application on which you can hang all other
features.

I believe that MVVM solves significant problems in Unity UI development and it
makes Unity-UI development easier. However MVVM (and particularly WPF) has taken
flak in the past for being difficult to learn. I've kept this in mind while
developing Unity-Weld so that it is designed for ease of learning and fast and
effective use. I hope that Unity-Weld can make the process of wiring up a UI
more enjoyable, or at least that to make it cause less friction.


CONCLUSION

In this first post of the Unity-Weld series, I've overviewed MVVM and I've
introduced Unity-Weld, a library that brings MVVM to Unity and allows you to
data-bind your UI to your view-model. Hopefully I've explained how useful MVVM
can be for structuring your UI and convinced you that Unity-Weld can make your
life easier.

In Part 2 I explain the basics of using Unity-Weld.

Ashley Davis's Picture

ASHLEY DAVIS

Software craftsman and author

SHARE THIS POST

Twitter Facebook
About | Follow | Support | Contact

Be updated before anyone else...

Learn better habits for more effective fullstack development
Learn more
Exploratory coding, data analysis and visualization for JavaScript and
TypeScript
Learn more
A project-based guide to building a microservices application with modern
tooling
Learn more
A practical and comprehensive guide to working with data in JavaScript
Learn more


Please enable JavaScript to view the comments powered by Disqus.

Code Capers © 2018
Proudly published with Eleventy and Digital Ocean Apps