OGS-Main
/
ogs-site


			
				
					
						
						
							
							<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <head>
        <style>
            #header
            {
                background: #2BA6E3;
                padding: 0.7em;
                text-align: left;
            }
            #header a
            {
                color: white;
                text-decoration: none;
                padding: 0.5em 1em 0.5em 1em;
            }

            #lang
            {
                float: right;
            }

            .news_item
            {
                background: #FFFFFF;
                width: 720px;
                padding: 1em;
                margin-top: 2em;
                margin-bottom: 2em;
                border: 1px solid #E0E0E0;
                text-align: left;
            }
            .news_item_contents
            {
                color: #444;
                line-height: 1.5em;
            }
            .news_item_date
            {
                margin-bottom: 2em;
                color: #aaa;
            }

            html
            {
                font-family: sans-serif;
            }
            body
            {
                background: #FAFAFA;
            }
            code, pre
            {
                font-family: monospace, serif;
                font-size: 1em;
                color: #7f0a0c;
            }
            img
            {
                width: 720px;
            }
            a
            {
                color: #3A91CB;
            }

            table
            {
                border-collapse: collapse;
            }
            table, th, td
            {
                border: 1px solid #aaa;
                padding: 0.5em;
                margin-top: 0.5em;
                margin-bottom: 0.5em;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <strong id="title">Open Game Studio</strong>
            <a href="../../en/news/index.html">News</a>
            <a href="../../en/game/index.html">Games</a>
            <a href="../../en/tool/index.html">Tools</a>
            <a href="../../en/page/about.html">About</a>
            <div id="lang">
                <a href="../../en/news/example-driven-development.html">EN</a>
                <a href="../../ru/news/example-driven-development.html">RU</a>
            </div>
        </div>
        <center>
            <h1>In the news...</h1>
            <div class="news_item">
                <h2 class="news_item_title">
                    <a href="example-driven-development.html">Example-driven development</a>
                </h2>
                <p class="news_item_date">
                    2018-06-27 00:00
                </p>
                <div class="news_item_contents">
<p><img src="../../images/2018-06-27-example-driven-development.png" alt="Debug broker" /></p>
<p>This article explains how the third OpenSceneGraph cross-platform example opened our eyes to example-driven development.</p>
<p><strong>2018-08 EDIT</strong>: the third example has been renamed to the fourth one due to the reasons described in the <a href="examples-and-dependencies.html">next article</a>.</p>
<p><strong>The third OpenSceneGraph cross-platform example</strong></p>
<p>The third OpenSceneGraph cross-platform example explains how to implement <a href="https://github.com/OGStudio/openscenegraph-cross-platform-examples/tree/master/04.RemoteDebugging">remote debugging across platforms</a>. This example is less about OpenSceneGraph and more about different platforms.</p>
<p>Remote anything nowadays assumes the use of HTTP(s) over TCP/IP. Thus, the first idea was to embed HTTP server into an application and let HTTP clients interact with the server.</p>
<p>However, serving HTTP across all platforms is complicated:</p>
<ul>
<li>desktops have firewalls</li>
<li>mobiles have restrictions on background processes</li>
<li>web browsers are HTTP clients by design</li>
</ul>
<p>That's why we decided to create a mediator between debugged application and UI.  <a href="https://github.com/OGStudio/debug-broker">Debug broker</a>, a small Node.js application, became that mediator.  Debug broker uses no external dependencies, so it's easy to run virtually anywhere. Also, since debug broker is a server application, you can configure it once and use it for any number of applications.</p>
<p>Both <a href="https://github.com/OGStudio/debug-ui">debug UI</a> and <a href="https://github.com/OGStudio/debug-broker">debug broker</a> use JavaScript because we wanted these tools to be accessible from anywhere with no prior installation. This decision limited us to web browser solution. Providing any sort of desktop application would incur additional installation and maintenance effort, which would only complicate the tools.</p>
<p><strong>Example-driven development establishment</strong></p>
<p>Once the third example was implemented, we realized how important and beneficial it is to develop new features outside the main project:</p>
<ul>
<li>the main project is freed from excessive commit noise</li>
<li>a new feature is publicly shared for everyone to learn, criticize, and improve</li>
</ul>
<p>When we publicly share our knowledge:</p>
<ul>
<li>we must create documentation for everyone (including ourselves later) to understand what's going on</li>
<li>we must not use hacks because that would break your trust in us</li>
</ul>
<p>From now on, all new features like input handling, Mahjong layout loading, resource caching, etc. are going to be first implemented as examples.  We call this example-driven development.</p>
<p>That's it for explaining how the third OpenSceneGraph cross-platform example opened our eyes to example-driven development.</p>
                </div>
            </div>
            <div id="footer">
                The site has been generated by <a href="http://opengamestudio.org/pskov">PSKOV</a>
                from <a href="http://github.com/ogstudio/site-opengamestudio">this source code</a>.
                The site is hosted by <a href="https://pages.github.com">GitHub Pages</a>.
            </div>
        </center>
    </body>
</html>