-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
222 lines (191 loc) · 9.16 KB
/
index.html
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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
---
layout: default
title: Preview Android layouts on real devices as you code - Mirror
---
<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns#">
<div id="main" class="clearfix">
<div class="inner clearfix">
<div id="content" class="twelvecol ">
<div id="post-682" class="post-682 page type-page status-publish hentry">
<div class="entry-content clearfix">
<div id="panel1" class="segment clearfix " style="padding-top: 12px;"><div class="segment-content">
<p><script>
(function(window, document, $) {
$(function() {
var asVideo = $('#as-video').find('video').first();
var n5Video = $('#phone-video').find('video').first();
var endedVideos = 0;
var play = function() {
asVideo.get(0).play();
n5Video.get(0).play();
endedVideos = 0;
}
var endedCallback = function() {
endedVideos++;
if (endedVideos === 2) {
play();
}
}
asVideo.on('ended', endedCallback);
n5Video.on('ended', endedCallback);
play();
});
})(window, document, jQuery);
</script></p>
<h2 style="margin-bottom:40px; margin-top:40px">Slow Gradle builds? Use Mirror to preview Android layouts, custom views and animations</strong></h2>
<div class="center" style="margin-top:10px; margin-bottom:5px;">
<a class="button orange small" href="{{site.baseurl}}/mirror-downloads" target="_self">FREE TRIAL</a> <a class="button blue small" href="https://secure.jimulabs.com/buy" target="_self" style="min-width:80px;">BUY</a>
</div>
<div class="center" style="margin-bottom: 25px;font-size: 0.75em;">An Android Studio / IntelliJ IDEA plugin</div>
<div id="as-video" style="width: 57% !important; float:left; margin-bottom:10px;">
<video class="mac-frame" preload muted poster="{{site.baseurl}}/wp-content/uploads/video-optimized/android-studio-poster.png"><source src="{{site.baseurl}}/wp-content/uploads/video-optimized/android-studio.webm" type="video/webm"><source src="{{site.baseurl}}/wp-content/uploads/video-optimized/android-studio.mp4" type="video/mp4"></video>
</div>
<div id="phone-video" style="width: 39% !important; float:right;">
<video class="n5-frame" preload muted poster="{{site.baseurl}}/wp-content/uploads/video-optimized/phone-poster.png" title="video: see your app's UI on real devices, with instant updates"><source src="{{site.baseurl}}/wp-content/uploads/video-optimized/phone.webm" type="video/webm"><source src="{{site.baseurl}}/wp-content/uploads/video-optimized/phone.mp4" type="video/mp4"></video>
</div>
<div class="center twelvecol">
<a class="eModal-1" href="#"><span class="special">Watch full video</span> <i class="icon-youtube"></i></a>
</div>
</div></div><!-- .segment-->
<div class="center news hidden" style="background: rgb(255, 194, 0); font-size: 20px; padding: 5px; color: white;">
<a href="{{site.baseurl}}/2015/01/building-android-animations-mirror-sandbox-piecewise/">Hot-swapping Java code with Mirror Sandbox! Request an invite now!</a>
</div>
<div id="panel2" class="segment clearfix "><div class="segment-content">
<div class="fourcol">
<!--
<div class="icon-pic"><i class="icon-happy"></i></div>
--></p>
<h4 class="center">Live-code</h4>
<div class="text-block">Save your XML / Java / Kotlin / PNG files. Check on devices in seconds. Rapidly experiment your layouts, custom views and animations.</div>
</div>
<div class="fourcol">
<h4 class="center">Prototype</h4>
<div class="text-block">Create full-fidelity prototypes and collect early feedback before coding Java. Reuse the code in production when the prototype is approved.</div>
</div>
<div class="fourcol last">
<h4 class="center">Collaborate</h4>
<div class="text-block">Trash design specs. Sit with your designer, make a change and get instant feedback. Encourage them to create the layouts too!</div>
</div>
</div></div><!-- .segment--><br />
<div id="happy-customers" class="segment clearfix "><div class="segment-content">
<div class="fourcol">
<blockquote>
<p>It’s absolutely awesome. I worked an entire afternoon on <a href="https://plus.google.com/+JoaoGouveiaa/posts/fzVnPS9V37P">an animation</a> for my app, without the sandbox I probably need more than a full day.</p>
<div class="team-member"><img src="{{site.baseurl}}/wp-content/uploads/2014/09/Joao-Gouveia.png" alt="Joao Gouveia" width="80" height="80" class="alignleft size-full wp-image-775" /></p>
<p>João Gouveia<br />Senior Android Developer<br />Passei Direto S/A</p>
</div>
</blockquote>
</div>
<div class="fourcol">
<blockquote>
<p>I found that Mirror really sped everything up for us in Android Studio. Mocking up things with dummy data is a nice touch. </p>
<div class="team-member">
<img src="{{site.baseurl}}/wp-content/uploads/2014/09/Steff-Kelsey.png" alt="Steff Kelsey" width="80" height="80" class="alignleft size-full wp-image-783" srcset="{{site.baseurl}}/wp-content/uploads/2014/09/Steff-Kelsey.png 80w,/wp-content/uploads/2014/09/Steff-Kelsey-75x75.png 75w" sizes="(max-width: 80px) 100vw, 80px" /></p>
<p>Steff Kelsey<br />Principal Software Engineer<br /><a href="http://www.sunsprite.com">GoodLux Technology</a></p>
</div>
</blockquote>
</div>
<div class="fourcol last">
<blockquote>
<p>My development productivity has skyrocketed since adding Mirror to my workflow! All Android developers should have it in their tool belt! </p>
<div class="team-member">
<img src="{{site.baseurl}}/wp-content/uploads/2015/04/Patrick-Hammond.jpeg" alt="Patrick Hammond" width="80" height="80" class="alignleft size-full wp-image-774" /></p>
<p>Patrick Hammond<br />Founder<br /><a href="http://www.madebyatomicrobot.com/">Atomic Robot</a></p>
</div>
</blockquote>
</div>
<p><!--
<div class="fourcol last">
<blockquote>
<p>What’s really outstanding is the direct support from the developers. I always got very quick and helpful feedback on any issues arose.</p>
<div class="team-member">
<img src="{{site.baseurl}}/wp-content/uploads/2014/09/Florian-Weigl.png" alt="Florian Weigl" width="80" height="80" class="alignleft size-full wp-image-774" />
<p>Florian Weigl<br />Mobile Developer<br /><a href="http://immowelt.de/">Immowelt AG Nuremberg</a></p>
</div>
</blockquote>
</div>
--></p>
<div class="twelvecol last center" style="margin-top: 30px;">
<a href="{{site.baseurl}}/happy-customers">See what other customers say</a>
</div>
</div></div><!-- .segment--><div id="features" class="segment clearfix " style="padding-top:0px;"><div class="segment-content">
<!-- Feature 1 --></p>
<div class="sixcol">
<div class="feature-container">
<h5>Hot-swapping</h5>
<ul>
<li>Mirror compiles incrementally and only sends deltas to the devices — much faster than rebuilding and reinstalling the full APK.</li>
<li>Hot-swapping resources, assets, and Java / Kotlin code <a href="{{site.baseurl}}/2014/04/stress-testing-mirror-with-16-devices/">on multiple devices</a></li>
<li>View states on the layout are preserved across refreshes</li>
</ul></div>
</div>
<p><!-- Feature 2 --></p>
<div class="sixcol last">
<div class="feature-container">
<h5>Accurate, interactive previews</h5>
<ul>
<li>Mirror’s previewer app inflates layouts and renders views the same way as your app does (it’s a normal Android app anyway). </li>
<li>Touch feedback, gestures and animations are as accurate as they should be.</li>
</ul>
</div>
</div>
<p><!-- Feature 3 --></p>
<div class="sixcol">
<div class="feature-container">
<h5>REPL for Android UI development</h5>
<ul>
<li>Experiment individual methods</li>
<li>Feed and test your custom view with different datasets</li>
<li>Build animations piecewise</li>
<li>Use code in production when ready</li>
</ul>
</div>
</div>
<p><!-- Feature 4 --></p>
<div class="sixcol last">
<div class="feature-container">
<h5>Custom views, custom fonts</h5>
<ul>
<li>Preview layouts with third-party libraries or your own custom views</li>
<li>Live-code custom views and custom adapters</li>
<li>Preview custom fonts, custom attributes</li>
</ul>
</div>
</div>
<p><!-- Feature 3 --></p>
<div class="sixcol">
<div class="feature-container">
<h5>Great for learning Android coding</h5>
<ul>
<li>Learn Android’s layout/resource system by building things that work on the real device</li>
<li>Experiment UI related APIs</li>
<li>Learn by doing in a fast feedback loop</li>
</ul>
</div>
</div>
<p><!-- Feature 4 --></p>
<div class="sixcol last">
<div class="feature-container">
<h5>Sample data</h5>
<ul>
<li>Build your UI in a realistic context before coding Java</li>
<li>Simple XML to set text, image, visibility and more</li>
<li>Populate list and grid views with different item layouts</li>
<li>Use Android’s “tools” attribute to populate views</li>
</ul>
</div>
</div>
<div class="twelvecol center">
<a class="button medium green" href="{{site.baseurl}}/mirror-downloads" style="margin-top: 20px; margin-bottom: 20px;">Try Mirror now!</a>
</div>
</div></div><!-- .segment--></p>
</div>
</div><!-- .entry-content -->
</div><!-- .hentry -->
</div><!-- #content -->
</div><!-- #main .inner -->
</div><!-- #main -->
</div><!-- #container -->
</body>
</html>