-
Notifications
You must be signed in to change notification settings - Fork 5
/
atom.xml
3683 lines (3091 loc) · 254 KB
/
atom.xml
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
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[Balint Erdi's blog about Ember.js]]></title>
<link href="http://balinterdi.com/atom.xml" rel="self"/>
<link href="http://balinterdi.com/"/>
<updated>2017-01-13T10:28:29+01:00</updated>
<id>http://balinterdi.com/</id>
<author>
<name><![CDATA[I'm all about Ember.js recently]]></name>
</author>
<generator uri="http://octopress.org/">Octopress</generator>
<entry>
<title type="html"><![CDATA[Two-way symmetric relationships in Ember with JSON API - Part 2]]></title>
<link href="http://balinterdi.com/2016/11/29/two-way-symmetric-relationships-in-ember-with-jsonapi-part-2.html"/>
<updated>2016-11-29T13:55:00+01:00</updated>
<id>http://balinterdi.com/2016/11/29/two-way-symmetric-relationships-in-ember-with-jsonapi-part-2</id>
<content type="html"><![CDATA[<p>In <a href="http://balinterdi.com/2016/11/17/two-way-symmetric-relationships-in-ember-with-jsonapi-part-1.html">Part 1</a> of this series, we saw what symmetric relationships are, how to
model them on the back-end (using Rails) and how to implement a simple app that
displays such relationships in Ember.js, adhering to the JSON API specification
for serializing data.</p>
<p>The solution we came up with worked but was a very naive one. For N relationships
a resource had, it made 2N+1 queries to the back-end to display them. We should
do better and in this post we’ll see how.</p>
<p>(If you haven’t read <a href="http://balinterdi.com/2016/11/17/two-way-symmetric-relationships-in-ember-with-jsonapi-part-1.html">the previous post</a>, this one will not make much sense,
so I recommend to at least skim it before you delve into this one.)</p>
<h2>One request to rule them all</h2>
<p>We’d observed that for each person whose friendships we wanted to observe, our
application made 2N+1 requests. One to grab the friendships themselves, and then
two requests for each friendship in that collection, one to fetch the
friender, one to fetch the friended person.</p>
<p><img src="http://balinterdi.com/images/posts/symmetric-relationships/too-many-xhrs.png" alt="Too many XHRs" /></p>
<p>We also noticed that those people (instances of the Person model) had already
been fetched at that point so the extra requests were for nothing. Our mission
is thus to reduce the 2N+1 requests to a single one, the one that fetches the
friendships.</p>
<h2>How would Ember (Data) know?</h2>
<p>If we take a look at the data returned by the request for friendships, you can
see that both the <code>friended</code> and <code>friender</code> end of each are just links with no
type or identity information (like <code>/friendships/1/friended</code>). This is all
that’s needed for an asynchronous relationship, since the client (Ember Data, in
this case) can just fetch the relationship data when/if it needs it.</p>
<p><img src="http://balinterdi.com/images/posts/symmetric-relationships/relationship-without-resource-linkage-data.png" alt="No linkage data" /></p>
<p>The solution, then, might be to include some data about the resource that the
relationship refers to. In the JSON API vocabulary this is called <a href="http://jsonapi.org/format/#document-resource-object-linkage">resource
linkage</a>:</p>
<blockquote>
Resource linkage in a compound document allows a client to link together all
of the included resource objects without having to GET any URLs via links.
</blockquote>
<p>Digging around in the <a href="https://github.com/cerebris/jsonapi-resources">jsonapi-resources source</a>, we find a relationship
option called <code>always_include_linkage_data</code> that seems to do what we need. Let’s
add that to the relationships of the friendship resource and see:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="c1"># app/resources/friendship_resource.rb</span>
</span><span class='line'><span class="k">class</span> <span class="nc">FriendshipResource</span> <span class="o"><</span> <span class="ss">JSONAPI</span><span class="p">:</span><span class="ss">:Resource</span>
</span><span class='line'> <span class="n">has_one</span> <span class="ss">:friender</span><span class="p">,</span> <span class="n">always_include_linkage_data</span><span class="p">:</span> <span class="kp">true</span>
</span><span class='line'> <span class="n">has_one</span> <span class="ss">:friended</span><span class="p">,</span> <span class="n">always_include_linkage_data</span><span class="p">:</span> <span class="kp">true</span>
</span><span class='line'> <span class="n">attributes</span> <span class="ss">:strength</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>If we now reload our Ember app, we see how a <code>data</code> key was added to each
relationship in the response, uniquely identifying the person resource that is
the friender (or friended) in the friendship relationship:</p>
<p><img src="http://balinterdi.com/images/posts/symmetric-relationships/relationship-with-resource-linkage-data.png" alt="Relationship with linkage data" /></p>
<p>Furthermore, the extra XHRs we wanted to eliminate are now indeed gone as Ember
Data is smart enough to just use the referred resources that are already in the
store:</p>
<p><img src="http://balinterdi.com/images/posts/symmetric-relationships/no-useless-xhrs.png" alt="Just the XHRs we need" /></p>
<h2>Let’s just be friends (not friendeds or frienders)</h2>
<p>We have now achieved what we’d wanted and only have to make one request per
person to fetch and display their friendships.</p>
<p>It looks a bit weird, though, that when a person’s friendships are displayed, we
also display the person’s name, too:</p>
<p><img src="http://balinterdi.com/images/posts/symmetric-relationships/friendships-step-1.png" alt="Mike McCready's friendships - Part 1" /></p>
<p>Let’s fix that by transforming the <code>friendships</code> of the person to an array where
each item only contains the friend’s name (and the strength of the friendship):</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// app/controllers/people/show.js</span>
</span><span class='line'><span class="kr">import</span> <span class="nx">Ember</span> <span class="nx">from</span> <span class="s1">'ember'</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="kr">const</span> <span class="p">{</span> <span class="nx">Controller</span><span class="p">,</span> <span class="nx">computed</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">Ember</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="kr">export</span> <span class="k">default</span> <span class="nx">Controller</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
</span><span class='line'> <span class="nx">friendships</span><span class="o">:</span> <span class="nx">computed</span><span class="p">(</span><span class="s1">'model.friendships.[]'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="kd">let</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'model'</span><span class="p">);</span>
</span><span class='line'> <span class="kd">let</span> <span class="nx">friendships</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'model.friendships'</span><span class="p">);</span>
</span><span class='line'> <span class="k">return</span> <span class="nx">friendships</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">friendship</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
</span><span class='line'> <span class="kd">let</span> <span class="nx">friend</span><span class="p">;</span>
</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="nx">friendship</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'friended.id'</span><span class="p">)</span> <span class="o">===</span> <span class="nx">person</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'id'</span><span class="p">))</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">friend</span> <span class="o">=</span> <span class="nx">friendship</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'friender'</span><span class="p">);</span>
</span><span class='line'> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">friend</span> <span class="o">=</span> <span class="nx">friendship</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'friended'</span><span class="p">);</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'> <span class="k">return</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">friend</span><span class="p">,</span>
</span><span class='line'> <span class="nx">strength</span><span class="o">:</span> <span class="nx">friendship</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'strength'</span><span class="p">)</span>
</span><span class='line'> <span class="p">};</span>
</span><span class='line'> <span class="p">});</span>
</span><span class='line'> <span class="p">})</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>
<p>Nothing fancy going on, we check which end of the relationship the person in
question (the <code>model</code>) is, and then only return the other end.</p>
<p>We should now use <code>friendships</code> in the template instead of <code>model.friendships</code>:</p>
<div>
<pre><code class='html'><div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Friends of {{model.name}}</h3>
</div>
<div class="panel-body">
{{#if friendships.length}}
<ul class="friend-list">
{{#each friendships as |friendship|}}
<li class="friend-list-item">
<span class="name">{{friendship.friend.name}}</span>
<span class="badge">{{friendship.strength}}</span>
</li>
{{/each}}
</ul>
{{else}}
<div class="empty-list">
<p class="empty-message">{{model.name}} has no friends :(</p>
</div>
{{/if}}
</div>
</div></code></pre>
</div>
<p>It works, we indeed only see the friend’s name, not the person’s:</p>
<p><img src="http://balinterdi.com/images/posts/symmetric-relationships/only-friend-name.png" alt="Relationship with linkage data" /></p>
<h2>Resources</h2>
<p>Hopefully you can now implement a symmetric relationship with relative
ease, the next time you encounter it.</p>
<p>I made the source code of both <a href="https://github.com/balinterdi/ember-two-way-symmetric-relationships">the Ember app</a> and the <a href="https://github.com/balinterdi/two-way-symmetric-relationships-api">Rails API</a>
available on Github. If you want to learn more about the jsonapi-resources gem,
I suggest you visit <a href="http://jsonapi-resources.com/">the documentation site</a>.</p>
<p>Finally, if you’d like to receive the series as a pdf, fill out the form below
and I’ll send it to you right away!</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Two-way symmetric relationships in Ember with JSON API - Part 1]]></title>
<link href="http://balinterdi.com/2016/11/17/two-way-symmetric-relationships-in-ember-with-jsonapi-part-1.html"/>
<updated>2016-11-17T12:52:00+01:00</updated>
<id>http://balinterdi.com/2016/11/17/two-way-symmetric-relationships-in-ember-with-jsonapi-part-1</id>
<content type="html"><![CDATA[<h2>Definition</h2>
<p>In data modelling, a symmetric relationship is a special kind of relationship
where the description of the relationship from the perspective of one end of
the relationship is identical to looking at it from the perspective of the other
end.</p>
<p>Friendship between people is a good example. If Megan is Selma’s friend, it
follows that Selma is Megan’s friend, too. On the other hand, the “knows”
relationship between two people is not a symmetric one. I might know Danny
Carey (the drummer of Tool), but that does not imply he knows me.</p>
<h2>Historical background</h2>
<p>My research into how to model and implement such a relationship in an Ember
application was sparked by <a href="http://stackoverflow.com/questions/34186435/modelling-two-way-symmetric-relationships-in-ember">this Stack Overflow question</a> that was posed by
a reader of <a href="http://rockandrollwithemberjs.com">my book</a>. It was more difficult than I thought it would be so I
was intrigued to find the (an) answer.</p>
<p>My solution turned out to have a fairly large API component, too, so the
following post will show both the server-side implementation (in Rails) and the
client-side one (in Ember).</p>
<p>If you don’t speak Rails, fear not. The code is straightforward and easy to
understand without any substantial Rails knowledge, thanks in most part to the gem that
makes it extremely easy to serialize data models and relationships to json:api
format, <a href="https://github.com/cerebris/jsonapi-resources">jsonapi-resources</a>.</p>
<h2>Data modelling</h2>
<p>We’ll start with the data modelling part, which is the Rails side.</p>
<p>To be able to model our problem in the data layer, let’s say that Friendships
have a <code>friender</code> and a <code>friended</code> end of the relationship and a strength
attribute that measures how strong their friendship is.</p>
<p>We should create a (data) migration that will create a database table when run:</p>
<pre><code> $ rails g migration create_friendships
</code></pre>
<p>Let’s fill in the generated migration with the above attributes:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">CreateFriendships</span> <span class="o"><</span> <span class="ss">ActiveRecord</span><span class="p">:</span><span class="ss">:Migration</span>
</span><span class='line'> <span class="k">def</span> <span class="nf">change</span>
</span><span class='line'> <span class="n">create_table</span> <span class="ss">:friendships</span> <span class="k">do</span> <span class="o">|</span><span class="n">t</span><span class="o">|</span>
</span><span class='line'> <span class="n">t</span><span class="o">.</span><span class="n">integer</span> <span class="ss">:friender_id</span>
</span><span class='line'> <span class="n">t</span><span class="o">.</span><span class="n">integer</span> <span class="ss">:friended_id</span>
</span><span class='line'> <span class="n">t</span><span class="o">.</span><span class="n">integer</span> <span class="ss">:strength</span>
</span><span class='line'> <span class="n">t</span><span class="o">.</span><span class="n">timestamps</span> <span class="ss">null</span><span class="p">:</span> <span class="kp">false</span>
</span><span class='line'> <span class="k">end</span>
</span><span class='line'> <span class="k">end</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>A Friendship, then, is between two people (Persons), so let’s define that in the
corresponding model file:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="c1"># app/models/friendship.rb</span>
</span><span class='line'><span class="k">class</span> <span class="nc">Friendship</span> <span class="o"><</span> <span class="ss">ActiveRecord</span><span class="p">:</span><span class="ss">:Base</span>
</span><span class='line'> <span class="n">belongs_to</span> <span class="ss">:friender</span><span class="p">,</span> <span class="n">class_name</span><span class="p">:</span> <span class="no">Person</span>
</span><span class='line'> <span class="n">belongs_to</span> <span class="ss">:friended</span><span class="p">,</span> <span class="n">class_name</span><span class="p">:</span> <span class="no">Person</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>We’ll want to list all the friendships a person has so a <code>friendships</code> method
needs to be added to the Person class:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="c1"># app/models/person.rb</span>
</span><span class='line'><span class="k">class</span> <span class="nc">Person</span> <span class="o"><</span> <span class="ss">ActiveRecord</span><span class="p">:</span><span class="ss">:Base</span>
</span><span class='line'> <span class="k">def</span> <span class="nf">friendships</span>
</span><span class='line'> <span class="no">Friendship</span><span class="o">.</span><span class="n">where</span><span class="p">(</span><span class="s2">"friender_id = ? OR friended_id = ?"</span><span class="p">,</span> <span class="nb">id</span><span class="p">,</span> <span class="nb">id</span><span class="p">);</span>
</span><span class='line'> <span class="k">end</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>We select the friendships where either the <code>friender</code> or the <code>friended</code> is the
person we query it for. This is where the symmetric aspect of the relationship
is implemented. We don’t care if the person friended somebody or if that
somebody friended him, they are friends.</p>
<p>Note that modelling it this way, we could split up the symmetric relationship
into the two constituent parts. We could return only the friendships where the
person in question “initiated” it (was the friender), or “let himself be
friended” (was the friender).</p>
<h2>Server endpoints, resources, serializing relationships</h2>
<p>We could now turn our attention to setting up the endpoints and serializing the
model, and relationship data for the client application to consume. First, let’s
install <a href="https://github.com/cerebris/jsonapi-resources">the jsonapi-resources gem</a>:</p>
<pre><code> $ gem install jsonapi-resources
</code></pre>
<p>This gives us a jsonapi:resource generator that we can use to create both the
endpoints and the serializer for our resources.</p>
<pre><code> $ rails generate jsonapi:resource person
$ rails generate jsonapi:resource friendship
</code></pre>
<p>The created resources are placed in the <code>app/resources</code> folder. Let’s add the
attributes we want to serialize for each one:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="c1"># app/resources/person_resource.rb</span>
</span><span class='line'><span class="k">class</span> <span class="nc">PersonResource</span> <span class="o"><</span> <span class="ss">JSONAPI</span><span class="p">:</span><span class="ss">:Resource</span>
</span><span class='line'> <span class="n">attributes</span> <span class="ss">:name</span>
</span><span class='line'> <span class="n">has_many</span> <span class="ss">:friendships</span><span class="p">,</span> <span class="n">class_name</span><span class="p">:</span> <span class="s2">"Friendship"</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="c1"># app/resources/friendship_resource.rb</span>
</span><span class='line'><span class="k">class</span> <span class="nc">FriendshipResource</span> <span class="o"><</span> <span class="ss">JSONAPI</span><span class="p">:</span><span class="ss">:Resource</span>
</span><span class='line'> <span class="n">has_one</span> <span class="ss">:friender</span>
</span><span class='line'> <span class="n">has_one</span> <span class="ss">:friended</span>
</span><span class='line'> <span class="n">attributes</span> <span class="ss">:strength</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>Creating the endpoints is no more work than adding a <code>jsonapi_resources</code> call
for each resource in the router configuration:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="c1"># config/routes.rb</span>
</span><span class='line'><span class="no">Rails</span><span class="o">.</span><span class="n">application</span><span class="o">.</span><span class="n">routes</span><span class="o">.</span><span class="n">draw</span> <span class="k">do</span>
</span><span class='line'> <span class="n">jsonapi_resources</span> <span class="ss">:people</span>
</span><span class='line'> <span class="n">jsonapi_resources</span> <span class="ss">:friendships</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>The gem also provides a controller generator so let’s use it to create controllers for our resources:</p>
<pre><code> $ rails generate jsonapi:controller person
$ rails generate jsonapi:controller friendship
</code></pre>
<p>They can be left empty but they need to be created in a way that they are
descendants of JSONAPI::ResourceController (the generator takes care of that):</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="c1"># app/controllers/people_controller.rb</span>
</span><span class='line'><span class="k">class</span> <span class="nc">PeopleController</span> <span class="o"><</span> <span class="ss">JSONAPI</span><span class="p">:</span><span class="ss">:ResourceController</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="c1"># app/controllers/friendships_controller.rb</span>
</span><span class='line'><span class="k">class</span> <span class="nc">FriendshipsController</span> <span class="o"><</span> <span class="ss">JSONAPI</span><span class="p">:</span><span class="ss">:ResourceController</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>
<p>The back-end is now done, we can switch our focus to the Ember app.</p>
<h2>The front-end</h2>
<p>We want a list of people (<a href="http://rockandrollwithemberjs.com">rock stars</a>, of course) and then have a list of
their friendships on the person details page.</p>
<p><img src="http://balinterdi.com/images/posts/symmetric-relationships/friendships-step-1.png" alt="Mike McCready's frienships - Part 1" /></p>
<p>The first step is to set up the routes:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="p">(...)</span>
</span><span class='line'><span class="nx">Router</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="k">this</span><span class="p">.</span><span class="nx">route</span><span class="p">(</span><span class="s1">'people'</span><span class="p">,</span> <span class="p">{</span> <span class="nx">path</span><span class="o">:</span> <span class="s1">'/'</span> <span class="p">},</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="k">this</span><span class="p">.</span><span class="nx">route</span><span class="p">(</span><span class="s1">'show'</span><span class="p">,</span> <span class="p">{</span> <span class="nx">path</span><span class="o">:</span> <span class="s1">'/people/:person_id'</span> <span class="p">});</span>
</span><span class='line'> <span class="p">});</span>
</span><span class='line'><span class="p">});</span>
</span><span class='line'>
</span><span class='line'><span class="kr">export</span> <span class="k">default</span> <span class="nx">Router</span><span class="p">;</span>
</span></code></pre></td></tr></table></div></figure>
<p>The model hooks for these routes are the classic, “fetch’em all” and “fetch the
one that matches the id” methods of Ember Data’s store:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="c1">// app/routes/people.js</span>
</span><span class='line'><span class="kr">import</span> <span class="nx">Ember</span> <span class="nx">from</span> <span class="s1">'ember'</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="kr">export</span> <span class="k">default</span> <span class="nx">Ember</span><span class="p">.</span><span class="nx">Route</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
</span><span class='line'> <span class="nx">model</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">store</span><span class="p">.</span><span class="nx">findAll</span><span class="p">(</span><span class="s1">'person'</span><span class="p">);</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="c1">// app/routes/people/show.js</span>
</span><span class='line'><span class="kr">import</span> <span class="nx">Ember</span> <span class="nx">from</span> <span class="s1">'ember'</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="kr">export</span> <span class="k">default</span> <span class="nx">Ember</span><span class="p">.</span><span class="nx">Route</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
</span><span class='line'> <span class="nx">model</span><span class="p">(</span><span class="nx">params</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">store</span><span class="p">.</span><span class="nx">findRecord</span><span class="p">(</span><span class="s1">'person'</span><span class="p">,</span> <span class="nx">params</span><span class="p">.</span><span class="nx">person_id</span><span class="p">);</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>
<p>Before we move on to writing the templates, let’s define the models:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// app/models/person.js</span>
</span><span class='line'><span class="kr">import</span> <span class="nx">DS</span> <span class="nx">from</span> <span class="s1">'ember-data'</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="kr">const</span> <span class="p">{</span> <span class="nx">Model</span><span class="p">,</span> <span class="nx">attr</span><span class="p">,</span> <span class="nx">hasMany</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">DS</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="kr">export</span> <span class="k">default</span> <span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
</span><span class='line'> <span class="nx">name</span><span class="o">:</span> <span class="nx">attr</span><span class="p">(),</span>
</span><span class='line'> <span class="nx">friendships</span><span class="o">:</span> <span class="nx">hasMany</span><span class="p">(),</span>
</span><span class='line'> <span class="nx">frienderFriendships</span><span class="o">:</span> <span class="nx">hasMany</span><span class="p">(</span><span class="s1">'friendship'</span><span class="p">,</span> <span class="p">{</span> <span class="nx">inverse</span><span class="o">:</span> <span class="s1">'friender'</span> <span class="p">}),</span>
</span><span class='line'> <span class="nx">friendedFriendships</span><span class="o">:</span> <span class="nx">hasMany</span><span class="p">(</span><span class="s1">'friendship'</span><span class="p">,</span> <span class="p">{</span> <span class="nx">inverse</span><span class="o">:</span> <span class="s1">'friended'</span> <span class="p">}),</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// app/models/friendship.js</span>
</span><span class='line'><span class="kr">import</span> <span class="nx">DS</span> <span class="nx">from</span> <span class="s1">'ember-data'</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="kr">const</span> <span class="p">{</span> <span class="nx">Model</span><span class="p">,</span> <span class="nx">attr</span><span class="p">,</span> <span class="nx">belongsTo</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">DS</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="kr">export</span> <span class="k">default</span> <span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
</span><span class='line'> <span class="nx">strength</span><span class="o">:</span> <span class="nx">attr</span><span class="p">(</span><span class="s1">'number'</span><span class="p">),</span>
</span><span class='line'> <span class="nx">friender</span><span class="o">:</span> <span class="nx">belongsTo</span><span class="p">(</span><span class="s1">'person'</span><span class="p">,</span> <span class="p">{</span> <span class="nx">inverse</span><span class="o">:</span> <span class="s1">'frienderFriendships'</span> <span class="p">}),</span>
</span><span class='line'> <span class="nx">friended</span><span class="o">:</span> <span class="nx">belongsTo</span><span class="p">(</span><span class="s1">'person'</span><span class="p">,</span> <span class="p">{</span> <span class="nx">inverse</span><span class="o">:</span> <span class="s1">'friendedFriendships'</span> <span class="p">}),</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>
<p>This is rather standard Ember Data stuff, possibly with the exception of the
<code>inverse</code> definitions. Since we have two relationships between <code>Person</code> and
<code>Friendship</code> we need to specify the other end of each relationship and that’s
what we do with the <code>inverse</code> option.</p>
<p>With the models and routes in place, we can now see what the templates should look like.</p>
<p>The top-level <code>people</code> route is again fairly straightforward:</p>
<div>
<pre><code class='html'>// app/templates/people.hbs
<div class="col-md-4">
<div class="list-group">
{{#each model as |person|}}
{{link-to person.name 'people.show' person.id class="list-group-item"}}
{{/each}}
</div>
</div>
<div class="col-md-8">
{{outlet}}
</div></code></pre>
</div>
<p>The <code>each</code> loop iterates through each person and renders a link for each of
those that will take us to the person details page, which will display the
person’s friendships.</p>
<p><img src="http://balinterdi.com/images/posts/symmetric-relationships/people-list-step-1.png" alt="List of people" /></p>
<h3>Listing a person’s friendships</h3>
<div>
<pre><code class='html'>// app/templates/people/show.hbs
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Friends of {{model.name}}</h3>
</div>
<div class="panel-body">
<ul class="friend-list">
{{#each model.friendships as |friendship|}}
<li class="friend-list-item">
<span class="name">{{friendship.friender.name}}</span>
<span class="name">{{friendship.friended.name}}</span>
<span class="badge">{{friendship.strength}}</span>
</li>
{{/each}}
</ul>
</div>
</div></code></pre>
</div>
<p>There is nothing fancy going on here, either. The <code>model</code> is the person
retrieved in the route. For each friendship that he has, the friender’s and
the friended’s name are rendered along with the strength of the relationship.
(Either <code>friender</code> or <code>friended</code> will be the person itself, but we can ignore that
in the first version.)</p>
<p>This naive approach works, the friendships for the selected person are listed correctly:</p>
<p><img src="http://balinterdi.com/images/posts/symmetric-relationships/friendships-step-1.png" alt="Mike McCready's friendships - Part 1" /></p>
<h2>A 2N+1 problem</h2>
<p>However, looking at the requests to the backend for just one page, one gets the
impression that we’re not done yet:</p>
<p><img src="http://balinterdi.com/images/posts/symmetric-relationships/too-many-xhrs.png" alt="Too many XHRs" /></p>
<p>For each friendship the person has, two requests are sent to the backend. One to
fetch the <code>friender</code> and another one to fetch the <code>friended</code> person. This is not
an <a href="https://www.sitepoint.com/silver-bullet-n1-problem/">N+1 query problem</a>, this is worse, a 2N+1 query problem!</p>
<p>On top of that, those requests are sent for no good reason as we’d previously
loaded the people referred by those <code>friended</code> and <code>friended</code> relationships.</p>
<p>In the next part, we’ll see how these wasteful requests can be eliminated and
we’ll also make the person details page less perplexing by not displaying the
person whose page we’re looking at in the relationships. Stay tuned!</p>
<p>UPDATE: <a href="http://balinterdi.com/2016/11/29/two-way-symmetric-relationships-in-ember-with-jsonapi-part-2.html">Part 2</a> is now available!</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Rock and Roll with Ember.js 2.9 is released]]></title>
<link href="http://balinterdi.com/2016/11/16/rock-and-roll-with-ember-dot-js-2-dot-9-is-released.html"/>
<updated>2016-11-16T14:17:00+01:00</updated>
<id>http://balinterdi.com/2016/11/16/rock-and-roll-with-ember-dot-js-2-dot-9-is-released</id>
<content type="html"><![CDATA[<p>I just published an updated version of the <a href="http://rockandrollwithemberjs.com">Rock and Roll with Ember.js book</a>. The app now runs on 2.9.1 and there are only
<a href="https://github.com/balinterdi/rarwe-issues/issues?q=is%3Aopen+is%3Aissue+milestone%3A2.9">a few really minor changes</a> this time.</p>
<p>If you’re looking to get started in Ember, I encourage you read a sample chapter below.</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Enable FastBoot in your Ember app]]></title>
<link href="http://balinterdi.com/2016/11/11/enable-fastboot-in-your-ember-app.html"/>
<updated>2016-11-11T11:20:00+01:00</updated>
<id>http://balinterdi.com/2016/11/11/enable-fastboot-in-your-ember-app</id>
<content type="html"><![CDATA[<h2>What is FastBoot and why should you use it?</h2>
<p><a href="https://ember-fastboot.com/">FastBoot</a> is the awesome add-on that adds
server-side rendering to your Ember app. This will make users of your
application see the content of your page before any of the javascript is
downloaded. In other words, the <a href="https://blog.alexmaccaw.com/time-to-first-tweet">“time to first tweet”</a>
of your app is greatly reduced, which is a big win where and when people have slow
or unstable network connections.</p>
<p>Another advantage is that search engine crawlers will have an easier job
indexing your site, which brings SEO benefits.</p>
<p>Furthermore, your site will be readable with Javascript disabled which is
convenient for screen readers.</p>
<p>I recently went through the process of enabling the demo version of the
<a href="http://rockandrollwithemberjs.com">Rock and Roll application</a> to run in Fastboot.
Below, I’m going to tell you about the challenges I encountered and how I
overcame them in the hope that my journey will prove valuable when you do the same for
your app.</p>
<h2>Installing the add-on</h2>
<p>FastBoot is a regular Ember add-on, so installing it is piece of cake:</p>
<pre><code>$ ember install ember-cli-fastboot
</code></pre>
<p>I could then run</p>
<pre><code>$ ember fastboot
</code></pre>
<p>from the project’s directory and had the node server serving my application at
port 3000. It’s important to note that you should refresh your browser tab each
time you make changes to your code as FastBoot doesn’t (yet) auto-refresh the
way <code>ember server</code> does.</p>
<p>I then disabled JavaScript in my browser and then directed my browser to <code>http://localhost:3000</code>.</p>
<p>Disabling JavaScript in Chrome is most easily done by expanding the context menu
of Developer Tools and then clicking on Settings:</p>
<p><img src="http://balinterdi.com/images/posts/fastboot/disable-javascript-in-chrome.png" alt="Disable JavaScript" /></p>
<h2>Mirage is disabled in FastBoot mode</h2>
<p>My first obstacle turned out to be Mirage.</p>
<p>Mirage is a great tool for mocking server responses and even <a href="https://www.codeschool.com/blog/2016/07/07/building-an-ember-app-without-a-back-end/">prototyping your Ember app</a>.
I used it in development, too, and it turned out that since <a href="https://github.com/samselikoff/ember-cli-mirage/blob/24f994f4419f1b175c82331b00c3089e3f65c038/index.js#L106">it turns itself off</a>
when your app is running in FastBoot mode, the requests hitherto handled by
Mirage now went out and were thus unhandled.</p>
<p>The fix here was to disable Mirage in development (and, in my case, production,
too) and to make the requests against an actual API.</p>
<p>You also have to add the hosts that will serve your Ember app in FastBoot mode
to a list called hostWhitelist in your app’s configuration.</p>
<p>In my case, it contains the host I wanted to deploy it to and any localhost
port:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// config/environment.js</span>
</span><span class='line'><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">environment</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">ENV</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'> <span class="p">(...)</span>
</span><span class='line'> <span class="nx">fastboot</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">hostWhitelist</span><span class="o">:</span> <span class="p">[</span><span class="s1">'demo.rockandrollwithemberjs.com'</span><span class="p">,</span> <span class="sr">/^localhost:\d+$/</span><span class="p">]</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'> <span class="p">};</span>
</span></code></pre></td></tr></table></div></figure>
<h2>Serving assets</h2>
<p>When I restarted the <code>ember fastboot</code> and looked at the server-rendered version
of my app, I saw that the dynamic data was now correctly rendered on the page.
However, it did not have any styling.</p>
<p>A quick glance at <a href="https://ember-fastboot.com/docs/user-guide">the documentation</a> made me realize I needed to pass the
<code>serve-assets</code> option to the command so that it serves the css (and other asset)
files:</p>
<pre><code>$ ember fastboot --serve-assets
</code></pre>
<h2>document is not defined</h2>
<p>So now the main page, with the list of bands rendered fine but when I selected
one of the bands to have their songs displayed, I got the following error:</p>
<pre><code>Error while processing route: bands.band.songs document is not defined
</code></pre>
<p>Since Fastboot runs your Ember app in a node environment, not in the browser,
<code>document</code> is not present. In my case, I accessed <code>document</code> (through jQuery)
to set the document title, which does not work in FastBoot mode.</p>
<p>The user guide suggested to use <a href="https://github.com/kimroen/ember-cli-document-title">ember-cli-document-title</a>, a FastBoot
compatible way to set document titles. So my next step was to install that
add-on:</p>
<pre><code>$ ember install ember-cli-document-title
</code></pre>
<p>Armed with this great add-on, I only had to define a title (method) in the
corresponding route:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// app/routes/bands/band/songs.js</span>
</span><span class='line'><span class="kr">import</span> <span class="nx">Ember</span> <span class="nx">from</span> <span class="s1">'ember'</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="kr">export</span> <span class="k">default</span> <span class="nx">Ember</span><span class="p">.</span><span class="nx">Route</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
</span><span class='line'> <span class="p">(...)</span>
</span><span class='line'> <span class="nx">title</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="kd">let</span> <span class="nx">bandName</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">modelFor</span><span class="p">(</span><span class="s1">'bands.band'</span><span class="p">).</span><span class="nx">get</span><span class="p">(</span><span class="s1">'name'</span><span class="p">);</span>
</span><span class='line'> <span class="k">return</span> <span class="err">`</span><span class="nx">$</span><span class="p">{</span><span class="nx">bandName</span><span class="p">}</span> <span class="nx">songs</span> <span class="o">-</span> <span class="nx">Rock</span> <span class="nx">and</span> <span class="nx">Roll</span><span class="err">`</span><span class="p">;</span>
</span><span class='line'> <span class="p">},</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>
<h2>Missing dynamic content</h2>
<p>The next thing that did not work was that the songs for a specific band did not
load in FastBoot mode, the list of songs was empty each time.</p>
<p>Adolfo Builes and Jonathan Jackson helped me out by pointing out that songs are
loaded asynchronously. The request to fetch the songs was only fired when the
template rendered each song belonging to the band. FastBoot does not
know when the page is fully rendered and thus relies on the <code>beforeModel</code>,
<code>model</code> and <code>afterModel</code> route hooks having finished their work. When that
happened, the songs were not yet fetched and rendered on the screen yet:</p>
<p><img src="http://balinterdi.com/images/posts/fastboot/songs-missing.png" alt="Songs missing" /></p>
<p>The way to fix this was to block rendering in the <code>afterModel</code> hook, by
returning a promise that fetched the songs:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// app/routes/bands/band/songs.js</span>
</span><span class='line'><span class="kr">import</span> <span class="nx">Ember</span> <span class="nx">from</span> <span class="s1">'ember'</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="kr">export</span> <span class="k">default</span> <span class="nx">Ember</span><span class="p">.</span><span class="nx">Route</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
</span><span class='line'> <span class="nx">fastboot</span><span class="o">:</span> <span class="nx">Ember</span><span class="p">.</span><span class="nx">inject</span><span class="p">.</span><span class="nx">service</span><span class="p">(),</span>
</span><span class='line'>
</span><span class='line'> <span class="nx">afterModel</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'fastboot.isFastBoot'</span><span class="p">))</span> <span class="p">{</span>
</span><span class='line'> <span class="kd">let</span> <span class="nx">band</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">modelFor</span><span class="p">(</span><span class="s1">'bands.band'</span><span class="p">);</span>
</span><span class='line'> <span class="k">return</span> <span class="nx">band</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'songs'</span><span class="p">);</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'> <span class="p">},</span>
</span><span class='line'> <span class="p">(...)</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>
<p>As you can see, I only pre-fetch the songs in FastBoot mode. In the browser, I
let rendering start earlier, with a “pop-in” effect (which can be remedied in
several ways in the browser, too).</p>
<p>The songs now appeared in the FastBoot “view” of the app, too:</p>
<p><img src="http://balinterdi.com/images/posts/fastboot/songs-present.png" alt="Songs present" /></p>
<p>You can read more about this in the “Use Model Hooks to Defer Rendering” section
of <a href="https://ember-fastboot.com/docs/user-guide">the guide</a>.</p>
<h2>Fastboot-enabled hosting</h2>
<p>It’s fine to have FastBoot working in development but nobody actually needs
it to work in that environment. It has to work when deployed to a server.</p>
<p>The guide has <a href="https://ember-fastboot.com/docs/deploying">a whole page on deployment</a>, listing several deployment
options, from which I chose Heroku as it seemed the easiest option. And it really was.</p>
<p>All I had to do was to set the buildpack URL from my project:</p>
<pre><code>$ heroku buildpacks:set https://codon-buildpacks.s3.amazonaws.com/buildpacks/heroku/emberjs.tgz -a rarwe-demo
</code></pre>
<p>I then added a <code>static.json</code> file to the root of my project, to disable forcing
https requests, as the domain is not (yet) SSL-supported:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// static.json</span>
</span><span class='line'><span class="p">{</span>
</span><span class='line'> <span class="s2">"root"</span><span class="o">:</span> <span class="s2">"dist/"</span><span class="p">,</span>
</span><span class='line'> <span class="s2">"https_only"</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
</span><span class='line'> <span class="s2">"clean_urls"</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
</span><span class='line'> <span class="s2">"routes"</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'> <span class="s2">"/**"</span><span class="o">:</span> <span class="s2">"index.html"</span>
</span><span class='line'> <span class="p">},</span>
</span><span class='line'> <span class="s2">"headers"</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'> <span class="s2">"/**"</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'> <span class="s2">"Cache-Control"</span><span class="o">:</span> <span class="s2">"private, no-store, no-cache, must-revalidate, proxy-revalidate"</span><span class="p">,</span>
</span><span class='line'> <span class="s2">"Pragma"</span><span class="o">:</span> <span class="s2">"no-cache"</span><span class="p">,</span>
</span><span class='line'> <span class="s2">"Expires"</span><span class="o">:</span> <span class="s2">"Sat, 05 Nov 1955 00:00:00 PST"</span><span class="p">,</span>
</span><span class='line'> <span class="s2">"Strict-Transport-Security"</span><span class="o">:</span> <span class="s2">"max-age=31536000; includeSubDomains;"</span><span class="p">,</span>
</span><span class='line'> <span class="s2">"X-Download-Options"</span><span class="o">:</span> <span class="s2">"noopen"</span><span class="p">,</span>
</span><span class='line'> <span class="s2">"X-Content-Type-Options"</span><span class="o">:</span> <span class="s2">"nosniff"</span><span class="p">,</span>
</span><span class='line'> <span class="s2">"X-Frame-Options"</span><span class="o">:</span> <span class="s2">"SAMEORIGIN"</span><span class="p">,</span>
</span><span class='line'> <span class="s2">"X-XSS-Protection"</span><span class="o">:</span> <span class="s2">"1; mode=block"</span>
</span><span class='line'> <span class="p">},</span>
</span><span class='line'> <span class="s2">"/assets/**"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"Cache-Control"</span><span class="o">:</span> <span class="s2">"public, max-age=512000"</span> <span class="p">},</span>
</span><span class='line'> <span class="s2">"/robots.txt"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"Cache-Control"</span><span class="o">:</span> <span class="s2">"public, max-age=512000"</span> <span class="p">},</span>
</span><span class='line'> <span class="s2">"/crossdomain.xml"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"Cache-Control"</span><span class="o">:</span> <span class="s2">"public, max-age=512000"</span> <span class="p">}</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>
<p>This step is really only needed to change the default <code>https_only</code> setting. If
you have SSL set up for your domain, you don’t need the <code>static.json</code> file.</p>
<p>The next time I pushed to the remote set up by Heroku, it just worked, and my
app was now FastBoot enabled. Hooray!</p>
<h2>Acknowledgements and further resources</h2>
<p>I would like to thank <a href="https://twitter.com/abuiles">Adolfo</a> and <a href="https://twitter.com/rondale_sc">Jonathan</a> for their help in pointing
me at <a href="https://emberweekend.com/">Ember Weekend</a>, an Ember app that runs in FastBoot and <a href="https://github.com/ember-weekend/ember-weekend">whose source code is publicly available</a>,
and also for overcoming the above mentioned “missing dynamic content” problem.</p>
<p>My app does not use many of Fastboot’s features. If you’re looking to see a more
complex use case, check out the <a href="https://github.com/ember-weekend/ember-weekend">Ember Weekend source code</a>.</p>
<p>If you want to learn more about FastBoot’s architecture and rationale, I
recommend checking out <a href="https://vimeo.com/157688134">Tom Dale’s great presentation</a> he gave at Global
Ember Meetup.</p>
<p>Finally, the Rock and Roll demo app that this post describes is available on
Github at <a href="https://github.com/balinterdi/rarwe-demo">balinterdi/rarwe-demo</a> and deployed to <a href="http://demo.rockandrollwithemberjs.com">http://demo.rockandrollwithemberjs.com</a>.</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Continuous Visual Integration for Ember apps]]></title>
<link href="http://balinterdi.com/2016/10/17/continuous-visual-integration-for-ember-apps.html"/>
<updated>2016-10-17T19:15:00+02:00</updated>
<id>http://balinterdi.com/2016/10/17/continuous-visual-integration-for-ember-apps</id>
<content type="html"><![CDATA[<p>I recently watched Mike Fotinakis’s presentation at the San Francisco Ember
meetup, <a href="https://youtu.be/iECnXK9EqA4">Continuous Visual Integration with Ember</a>,
and I’ve become really enthusiastic about visual diffs, and Percy.</p>
<p>It’s really worth the time and I highly recommend to watch it. I could say
“watch it now and then come back” but it’s a 50-minute long video while this
post takes 5 minutes to read, so I recommend to do it the other way around: read
this post first and then go and watch the presentation where he goes into more
details on what visual diffs and CI are, how Percy works and answers to
questions from the audience.</p>
<p>Ready? Cool. Start the timer and let’s go.</p>
<h3>So what is continuous visual integration?</h3>
<p>I will give you the high-level definition and rationale of visual diffs
and continuous visual integration as the post otherwise wouldn’t make sense.</p>
<p>When we change code, the intangible stuff apps are made of, we risk breaking it.
To prevent this, we write tests that guard against regression (a nice way of
saying breaking stuff) and do code reviews where someone goes over the code
diffs, and potentially after a series of edits, confirms it.</p>
<p>However, that’s just the code part. There are other ways to break a web
application, a major one among them is for the app to look differently than
before, in an unintended way. The background color of a button might change, a
link could have become hidden, or a css file could no longer be downloaded
which all lead to a degraded visual experience for visitors of the app.</p>
<p>Our (textual) tests could pass with flying colors and yet the users of the app
could be running away screaming from our site. Visual diffs guard against that
scenario by showing a visual diff, what certain scenarios looked before and
after the code changes under test.</p>
<h3>Visual diffs as part of the review process</h3>
<p>The idea is to have screenshots made at certain points in our user flows and
have a review process that approves the changes, just as we do for code.</p>
<p>To automate the process, we integrate the generation of visual diffing in the
automated testing process. This will produce the “before” and “after”
screenshots that will be used to generate the diffs. Let’s see how this is done
in practice.</p>
<h3>Making all this a breeze with Percy</h3>
<p>Percy is a visual diffing tool that automates all of this and integrates
smoothly into the Github pull request process. To get started with Percy,
install the Ember addon:</p>
<pre><code>$ ember install ember-percy
</code></pre>
<p>If you use Mirage for your tests, like I do, make sure to define a passthrough
rule for Percy on top of your Mirage config, before any other rules (see
<a href="https://percy.io/docs/clients/javascript/ember">the docs</a>):</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>