Yosemite.js

Quick Start

Reference

Hello World

To begin, let's say you have a partial file sayHello.php in the backend. Very typical code:

// sayHello.php
<h1>Hello <?= $_REQUEST['who'] ?></h1>

<form action="sayHello.php">
  Say hello to: <input type="text" name="who" value="" />
  <input type="submit" value="Submit" />
</form>

<ul>
  <li><a href="sayHello.php?who=Emily">Say hello to Emilty</a></li>
  <li><a href="sayHello.php?who=Katy">Say hello to Katy</a></li>
</ul>

Now, make a new file which will be used as the page container for holding the above partial file. Let's say the file is called index.php

<head>
  <!-- some fancy css files go here, such as bootstrap -->
  <!-- dependencies -->
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="jquery.form.js"></script>
  <!-- yosemite.js -->
  <script type="text/javascript" src="yosemite.js"></script>
</head>

<body>
  <div id="pageContainer"></div>
  <script type="text/javascript">
    window.Yosemite.init($('#pageContainer'));
  </script>
</body>

Now, open any web browser, go to /#!/sayHello.php. Boom, you can see the actual partial sayHello.php is embeded and displayed in the outter host page.

This is because the Yosemite.js has a routing logic to extract the actual URL, and makes an AJAX request to update the host page.

Note:

You may noticed that in the second step, we named the host page to be index.php. The reason is that we want to make the route URL look prettier.

If we name the host page another name, like dispatchter.php, the route URL will become /dispatcher.php#!/sayHello.php, which is not intuitive around the hash mark.

Then, soon you will find a cool thing is that, when you click any link, or submit button, you will notice the host page respond to the embeded page accordingly. Even though, we didn't make any code change to the embeded page.

This is because Yosemite.js will intercept all link-clicking and form-submitting in the embeded page, and make it go through the AJAX request in the host page context.

This is an example we hook one web page into a host page context. And of course, you can scale it up, you can have ten web pages, or one-hundred web pages, both being served in the host page context. And, boom, you have a web application.

But converting to web application is not the sake we do for. Right? The benifit is that, with only one host page context, we can share a global context, and make code more easy to manage. Right? with one single host page, you can set up a global event flow system if you want; you can set up a global css system and overwrite embeded pages' css if you want; You can add animation during page loading if you want; You can make the embeded pages and host pages running in totally different backend systems respectively if you want. Anyhow, with Yosemite.js, it makes all the things much easier.