calatrava.github.com/index.html at master · calatrava/calatrava.github.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>Calatrava</title>
    <link rel="icon" href="/images/favicon.png">
    <link rel="stylesheet" href="stylesheets/styles.css">
    <link rel="stylesheet" href="stylesheets/pygment_trac.css">
    <script src="javascripts/scale.fix.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, max-scale=1">

    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body id="homepage">
    <div class="wrapper">
      <header>
        <hgroup id="home-branding">
          <h1>Calatrava</h1>
          <h2><img src="images/calatrava-logo.svg" alt="Calatrava Logo Lockup" /></h2>
          <p>Mobile cross-platform logic. Freedom to build great UIs.</p>
        </hgroup>

        <pre><code class="gem-install">$ gem install calatrava</code></pre>

        <hr>

        <nav>
          <ul>
            <li><a href="https://github.com/calatrava/calatrava">GitHub</a></li>
            <li><a href="https://github.com/calatrava/calatrava/wiki">Docs</a></li>
            <li><a href="https://groups.google.com/d/forum/calatrava-mobile">Google Groups</a></li>
          </ul>
        </nav>
      </header>
      <section>
        <article>
          <p>
            Calatrava is a cross-platform mobile framework that lets you share
            the core logic of your application across iOS, Android and Mobile
            Web, but unlike other XP toolkits it allows you to always write the
            highest quality native UI you need.
            Read the <a href="http://overwatering.org/blog/2012/10/announcing-calatrava/">announcement</a>
            for more detail.
          </p>
                  <p>
          Calatrava is maintained by <a href="https://github.com/gga" class="user-mention">@gga</a>,
          based on an idea from <a href="https://github.com/moredip" class="user-mention">@moredip</a>.

          Developed with the support of <a href="http://www.thoughtworks.com/">ThoughtWorks</a>,
          the custom software experts, and my employer.
        </p>
        </article>

<hr>

<article id="getting-started">
<h2>Getting Started</h2>
<ol>
<li>
  <span>Write your feature in javascript or coffeescript.</span>

  <figure>
    <pre><code>your.feature.controller = ({views, changePage, ajax}) ->
  views.form.bind 'save', ->

  # All logic in 1-place.
  # In a single language.

  # Allows you to pivot on your logic.
  # Without going broke.

</code><pre></figure>
</li><li>
  <span>Author your inital UI with html, css and js.</span>

  <figure><pre><code>&lt;html&gt;

&lt;h1&gt;Your App&lt;&#47;h1&gt;

&lt;p&gt;Get your idea up and running quickly in html.&lt;&#47;p&gt;
&lt;p&gt;Upgrade this feature with native ui.&lt;&#47;p&gt;

&lt;strong&gt;NO handcuffing ui-framework.&lt;&#47;strong&gt;

&lt;&#47;html&gt;</code>
    <pre>
  </figure>
</li><li>
  <span>Upgrade inidividual views to native UI.</span>
  <figure>
    <pre><code>#import &lt;UIKit/UIKit.h&gt;

@interface MyAppSaveButton : UIView {

- (void) setCollected:(BOOL)collected;
- (void) didTapCollected:(BasicCallback)callback;
- (void) showCollectingFeedbackUI:(BOOL)showFeebackUI;

@end</code><pre>
</figure>
</li>
</ol>
</article><!-- end #getting-started -->

<hr>
        <article id="key-points">
          <h2>Key Points</h2>

          <ul>
            <li>Calatrava is about shared <strong>logic</strong>.
            <li>Calatrava is <strong>not</strong> about sharing UI.
            <li>Write your app as a single-page mobile web app.
            <li>Use CoffeeScript for all the logic.
            <li>Separate your UI from your logic.
            <li>App features remain in sync across all platforms.
            <li>Upgrade web UI to native immediately or as constraints allow.
            <li>No handcuffing UI frameworks.
          </ul>
        </article>

        <hr>

        <article class="decision-tree">
          <h2>Should I use Calatrava?</h2>
          <p>Calatrava has it's sweet spot. Use the flow below to find out if Calatrava fits your needs.</p>

          <figure class="decision-tree-flow">
            <p class="question">Does your app have complex logic?</p>
            <p class="answer">Yes</p>
            <p class="question">Is the complexity mainly in the UI?</p>
            <p class="answer">No</p>
            <p class="question">Is your app's logic mainly server-side?</p>
            <p class="answer">No</p>
            <p class="question">Does it need to work on more than one platform?</p>
            <p class="answer">Yes</p>
            <p><img src="images/calatrava-logo.svg" alt="Calatrava Logo Lockup" /></p>
          </figure>
        </article>
        <hr>

      </section>

    <footer>
      <p>
        Like what you see here?
        <br />
        Want ThoughtWorks to <a href="http://www.thoughtworks.com/">work with you</a>?
        Or do you want to <a href="http://join.thoughtworks.com/">work with us</a>?
      </p>

      <p>
        &copy; ThoughtWorks, Inc 2012 &mdash;
      </p>

      <nav>
        <ul>
          <li><a href="https://github.com/calatrava/calatrava">GitHub</a></li>
          <li><a href="https://github.com/calatrava/calatrava/wiki">Docs</a></li>
          <li><a href="https://groups.google.com/d/forum/calatrava-mobile">Google Groups</a></li>
        </ul>
      </nav>
    </footer>

  </div>
  </body>
</html>