Arquitetura de Front-end em Aplicações de Larga Escala
-
Upload
eduardo-shiota-yasuda -
Category
Technology
-
view
1.911 -
download
0
description
Transcript of Arquitetura de Front-end em Aplicações de Larga Escala
![Page 1: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/1.jpg)
Arquitetura deFront-end emaplicações delarga escala
@shiota | eshiota.com
RAILS
EDITION
![Page 2: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/2.jpg)
Front-end
![Page 3: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/3.jpg)
Internet
![Page 4: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/4.jpg)
Arquitetura simples
Arquitetura complexa
![Page 5: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/5.jpg)
Na minha visão, aplicações JavaScript de larga escala são aplicações não-triviais que requerem um esforço significante de manutenção por parte do desenvolvedor, onde a maior parte do trabalho de manipulação de dados e visualização é atribuída ao navegador.
Addy OsmaniDeveloper Programs Engineer @ Google
![Page 6: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/6.jpg)
Aplicações com front-end de larga escala são aplicações não-triviais que requerem um esforço significante de manutenção por parte do desenvolvedor, onde organização, modularização, otimização e reutilização de código são cruciais.
Eduardo Shiota YasudaLoves cat videos on Youtube
![Page 7: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/7.jpg)
Aplicações de pequena escala
![Page 8: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/8.jpg)
style.css
templates
application.js& jQuery / plugins
imagens
CMS
![Page 9: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/9.jpg)
CSS simples
Centenas de linhas
Fácil de manter
![Page 10: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/10.jpg)
JS Simples
Plugins e algumas funções
Uma função autoexecutável
jQuery
![Page 11: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/11.jpg)
Aplicações de Larga escala
![Page 12: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/12.jpg)
![Page 13: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/13.jpg)
![Page 14: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/14.jpg)
![Page 15: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/15.jpg)
![Page 16: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/16.jpg)
![Page 17: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/17.jpg)
HTML, CSS e JavaScript modulares
![Page 18: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/18.jpg)
Noção de módulo
![Page 19: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/19.jpg)
![Page 20: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/20.jpg)
![Page 21: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/21.jpg)
![Page 22: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/22.jpg)
![Page 23: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/23.jpg)
HTML & CSS modular
![Page 24: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/24.jpg)
![Page 25: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/25.jpg)
<section class="side-block"> <h3>Quick links</h3>
<ul class="arrowed-list side-list"> <li> <a href="#">Your profile</a> </li> <li> <a href="#">MKX settings</a> </li> <li> <a href="#">MIH SWAT</a> </li> <li> <a href="#">Invite users</a> </li> </ul></section>
![Page 26: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/26.jpg)
<section class="side-block"> <h3>Your starred content</h3>
<ul class="iconed side-list"> <li class="file-locked"> <a href="#">RubyConf - 02 - Ruby is cool</a><br /> <small>in group: <a href="#">Ruby</a></small> </li> <li class="photo-locked"> <a href="#">RubyConf entrance hall</a><br /> <small>in group: <a href="#">Ruby</a></small> </li> <li class="doc"> <a href="#">MongoDB</a><br /> <small>in company: <a href="#">MIH SWAT</a></small> </li> <li class="forum"> <a href="#">Ruby group files...</a><br /> <small>in group: <a href="#">Ruby</a></small> </li> </ul></section>
![Page 27: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/27.jpg)
<section class="side-block"> <h3>Recommended contacts</h3>
<ul class="side-list"> <li class="data-card"> <div class="card-content"> <hgroup> <h4>Lorem ipsum</h4> <h5>CEO @ <a href="#">MIH SWAT</h5> </hgroup>
<p><a href="#">[add as contact]</a></p> </div>
<img src="image.jpg" alt="Lorem ipsum" /> </li>
<li class="data-card"> <div class="card-content"> <hgroup> <h4>Lorem ipsum</h4> <h5>Technical Architect @ <a href="#">MIH SWAT</h5> </hgroup>
<p><a href="#">[add as contact]</a></p> </div>
<img src="image.jpg" alt="Lorem ipsum" /> </li> </ul></section>
![Page 28: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/28.jpg)
<section class="side-block"> <h3></h3>
<ul class="side-list"> <li></li> </ul></section>
![Page 29: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/29.jpg)
/*********************************** patterns/side_list.scss**********************************/
.side-list { list-style: none outside; padding: 0;}
.side-list li { margin-bottom: 10px; overflow: hidden;}
/*********************************** patterns/arrowed_list.scss**********************************/
.arrowed-list li { margin-bottom: 0.2em; position: relative;}
.arrowed-list li:before { content: "\25B8"; display: inline-block; margin-right: 0.3333em;}
![Page 30: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/30.jpg)
/*********************************** patterns/side_block.scss**********************************/
.side-block { margin-bottom: 1.5em;}
.side-block h3 { border-bottom: 1px solid #cecece; font-size: 1em; /* 16px / 16px */ margin-bottom: 0.8em; padding-bottom: 0.1em;}
![Page 31: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/31.jpg)
![Page 32: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/32.jpg)
<section> <h3>Recommended contacts</h3>
<ul class="side-list small-entity-list"> <li class="data-card"> <div class="card-content"> <hgroup> <h4>Lorem ipsum</h4> <h5>CEO @ <a href="#">Buscapé</h5> </hgroup>
<p><a href="#">[add as contact]</a></p> </div>
<img src="image.jpg" alt="Lorem ipsum" /> </li> </ul></section>
![Page 33: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/33.jpg)
<article class="data-card group-activity"> <div class="card-content"> <p> <a href="#" class="actor">Rafael Dohms</a> joined a group: <a href="#" class="subject">I love Ruby on Rails</a> </p>
<p> <date>2 hours ago</date> <a href="#">Unlike</a> <a href="#">Comment entry</a> </p> </div>
<img src="image.jpg" alt="Rafael Dohms" /></article>
![Page 34: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/34.jpg)
<article class="data-card"> <div class="card-content"> </div>
<img /></article>
![Page 35: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/35.jpg)
/*********************************** patterns/data_card.scss**********************************/
.data-card { min-height: 120px; position: relative;}
/* Override width and height as needed */.data-card > img { position: absolute; left: 0; top: 0; width: 120px; height: 120px;}
/* Override padding-left as needed */.data-card .card-content { padding-left: 140px;}
![Page 36: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/36.jpg)
/**************************************** patterns/small_entity_list.scss** children extend patterns/data_card***************************************/
.small-entity-list .data-card { min-height: 60px;}
.small-entity-list .data-card > img { width: 60px; height: 60px;}
.small-entity-list .data-card .card-content { padding-left: 80px;}
![Page 37: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/37.jpg)
.button
.large-button
.confirm-button
.send-button
![Page 38: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/38.jpg)
.button { border-radius: 5px; font-family: "proxima-nova", sans-serif; height: 2em; line-height: 2em; padding: 1em; color: #fff; text-shadow: 0 -1px 0 #000;}
.large-button { font-size: 3em;}
.confirm-button { background: #ffba00; box-shadow: 0 3px 0 #cd9600;}
.send-button { /* styles for icon placement */}
![Page 39: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/39.jpg)
.button
.large-button
.confirm-button
.send-button
![Page 40: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/40.jpg)
.button
.small-button
.confirm-button
.send-button
![Page 41: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/41.jpg)
Multiple classes + Single responsabilities
Short inheritance (3-4 levels max)
Portable classes
![Page 42: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/42.jpg)
Organizando os módulos
![Page 43: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/43.jpg)
/* * application.css example w/ Asset Pipeline * *= require base/reset *= require core/typography *= require core/forms *= require_tree ./patterns *= require ui/buttons *= require ui/loader *= require ui/datepicker */
![Page 44: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/44.jpg)
application.scss w/ SASS
![Page 45: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/45.jpg)
base/_functions.scss
![Page 46: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/46.jpg)
core/_typography.scss
![Page 47: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/47.jpg)
ui/_loader.scss
![Page 48: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/48.jpg)
application-ec8971025292ecb7dd2c99d430d7a76e.css
![Page 49: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/49.jpg)
Leituras
![Page 50: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/50.jpg)
oocss.org
![Page 52: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/52.jpg)
JavaScript modular
![Page 53: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/53.jpg)
JavaScript não é (só) jQuery
![Page 54: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/54.jpg)
shareTypeSelector.js
shareForm.js
shareField.js
newsfeed.js
![Page 55: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/55.jpg)
shareForm
shareTypeSelector shareField
mediator.js
trigger("share-type-changed") on("share-type-changed")
shareProxy
newsfeed
on("new-post")trigger("new-post")
init init
submit get
dataonsuccess
![Page 56: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/56.jpg)
Modules + Tests
=
OMGBBQW00T
![Page 57: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/57.jpg)
/** Loader constructor
@params {Function} placement Function that determines the loader's placement @constructor**/ns("EDEN.ui.Loader", function (placement) { if (!(this instanceof EDEN.ui.Loader)) { return new EDEN.ui.Loader(placement); }
this.frame = 1; this.framesQty = 8; this.stack = []; this.animating = false; this.$loader = $("<div class='loader'><b> </b></div>"); this.$renderer = this.$loader.find("b"); this.placement = placement;
this.init();});
![Page 58: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/58.jpg)
/** Animation speed (in frames per second)
@property fps @type Number @default 20**/EDEN.ui.Loader.prototype.fps = 20;
/** Fading speed
@property fadeSpeed @type Number @default 150**/EDEN.ui.Loader.prototype.fadeSpeed = 150;
![Page 59: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/59.jpg)
/** Inits the loader by inserting it into the DOM. If a placement argument wasn't passed to the constructor, uses a generic placement.
@method init**/EDEN.ui.Loader.prototype.init = function () { if (!this.placement) { this.placement = function ($loader) { $loader.appendTo($("body")); }; }
this.placement.call(this, this.$loader);};
![Page 60: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/60.jpg)
/** Starts the loader by fading in and starting the animation. If there are multiple processes, stacks the requests.
@method start**/EDEN.ui.Loader.prototype.start = function () { this.stack.push((new Date()).getTime());
if (this.stack.length === 1) { this._startAnimation(); }};
/** Stops the loader by fading out and stoping the animation If there are any processes pending, pops the requests until it can actually stop.
@method stop**/EDEN.ui.Loader.prototype.stop = function () { this.stack.pop();
if (!this.stack.length) { this._stopAnimation(); }};
![Page 61: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/61.jpg)
/** Starts the loader animation
@private**/EDEN.ui.Loader.prototype._startAnimation = function () { this.animating = true;
this._renderAnimation();};
/** Stops the loader animation
@private**/EDEN.ui.Loader.prototype._stopAnimation = function () { this.animating = false;};
![Page 62: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/62.jpg)
/** Loops the animation, calling itself according to the fps
@private**/EDEN.ui.Loader.prototype._renderAnimation = function () { if (!this.animating) { return true; }
this._draw(); setTimeout(this._renderAnimation.bind(this), 1000 / this.fps);};
/** Draws the animation
@private**/EDEN.ui.Loader.prototype._draw = function () { this.$renderer.removeClass().addClass("f" + this.frame);
this.frame = this.frame + 1 > this.framesQty ? 1 : this.frame + 1;};
/** Returns the animation stack.
@return Array @private**/EDEN.ui.Loader.prototype._getAnimationStack = function () { return this.stack;};
![Page 63: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/63.jpg)
não achei um logo maior :(
![Page 64: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/64.jpg)
it("appends the loader to body as a default", function () { var loader = new Loader();
expect($("body").find(".loader").length).toEqual(1);});
it("appends the loader through an argument function", function () { var loader = new Loader(function ($loader) { $("#loader-placeholder").append($loader); });
expect($("#loader-placeholder").find(".loader").length).toEqual(1);});
it("stops the animation if stack is empty", function () { loader.start(); loader.stop();
expect($(".loader").data("spinning")).not.toBeTruthy();});
![Page 65: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/65.jpg)
it("renders the animation at default speed (20fps)", function () { jasmine.Clock.useMock(); spyOn(loader, "draw");
loader.start();
jasmine.Clock.tick(2000);
// The first renderAnimation call renders the first frame, and then // starts the frame counting. So it'll always be (fps * seconds) + 1 expect(loader.draw.calls.length).toEqual(41);});
![Page 66: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/66.jpg)
![Page 67: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/67.jpg)
![Page 68: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/68.jpg)
jasmincerice + guard-jasmine +
PhantomJS + Jenkins
=
OMGWTFBBQW00TROFL
![Page 71: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/71.jpg)
phantomjs.org
![Page 72: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/72.jpg)
Jenkins » rake guard:jasmine
![Page 73: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/73.jpg)
![Page 74: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/74.jpg)
SOLID principles
Loose coupling » Portable
Testable
MV**
![Page 75: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/75.jpg)
Organizando os módulos
![Page 76: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/76.jpg)
// application.js with Asset Pipeline////= require jquery//= require jquery_ujs//= require jquery/jquery.inputmask//= require jquery/jquery.validate//= require jquery/jquery.uniform//= require i18n//= require i18n/translations//= require i18n/setLocale//= require_tree shims//= require tools/namespace//= require accounting//= require handlebars-1.0.0.beta.6//= require eden/events//= require eden/dispatcher//= require eden/appMediator//= require_tree ./jquery//= require_tree ./eden/ui//= require_tree ./eden/presenters//= require_tree ./eden/validators//= require ./eden/forms/SubmitButton//= require_tree ./eden/forms//= require_tree ./eden/components//= require_tree ./eden/views//= require_tree ./eden/proxies//= require_tree ./eden/commands//= require_tree ./eden/services//= require_tree ./eden/modules//= require eden/app
![Page 77: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/77.jpg)
documentcloud.github.com/jammit/
![Page 78: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/78.jpg)
requirejs.org
![Page 79: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/79.jpg)
//my/shirt.js now has some dependencies, a cart and inventory//module in the same directory as shirt.jsdefine(["./cart", "./inventory"], function(cart, inventory) { //return an object to define the "my/shirt" module. return { color: "blue", size: "large", addToCart: function() { inventory.decrement(this); cart.add(this); } }; });
![Page 80: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/80.jpg)
github.com/jwhitley/requirejs-rails
![Page 81: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/81.jpg)
Leituras
![Page 82: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/82.jpg)
![Page 83: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/83.jpg)
addyosmani.com/largescalejavascript
![Page 84: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/84.jpg)
addyosmani.github.com/todomvc/
![Page 85: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/85.jpg)
Ferramentas paramanter a organização
![Page 89: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/89.jpg)
Exemplos com compass
![Page 90: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/90.jpg)
Geração de sprites
![Page 91: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/91.jpg)
/* Attributes a sprite map to a variable */
$icon-sprite: sprite-map("icon/*.png", $spacing: 16px, $repeat: no-repeat, $layout: vertical);
![Page 92: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/92.jpg)
$icon-sprite: sprite-map("icon/*.png", $spacing: 16px, $repeat: no-repeat, $layout: vertical);
![Page 93: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/93.jpg)
/* Compass sprite function receives the map variable and image as arguments */
background: sprite($icon-sprite, arrow_dropdown) no-repeat;
/* Compiled CSS */
background: url(/assets/icon-s5dab8c2901.png) -40px -158px no-repeat;
![Page 94: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/94.jpg)
Inline images - base64
![Page 95: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/95.jpg)
/* Generates a base64 image */
background: #f5f3eb inline-image("bg_dots.png") repeat;
/* Compiled CSS */
background: #f5f3fb url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAQCAMAAAAcVM5PAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRF5+TW////////4qZUpQAAAAN0Uk5T//8A18oNQQAAACBJREFUeNpiYGBgAgMGBkYog4mJXAbILAiDkVxzAAIMAEMOAPMId2OWAAAAAElFTkSuQmCC') repeat;
![Page 96: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/96.jpg)
Vendor prefixes
![Page 97: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/97.jpg)
.my-gradient { background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: -ms-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));}
![Page 98: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/98.jpg)
.my-gradient { background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: -ms-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));}
![Page 99: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/99.jpg)
/* Generates vendor-prefixed rules */
.my-gradient { @include background-image( linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) );}
/* Compiled CSS */
.my-gradient { background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: -ms-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));}
![Page 100: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/100.jpg)
Resumindo
![Page 101: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/101.jpg)
Modules, motherf*cker.
![Page 102: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/102.jpg)
Aprenda JavaScript.
![Page 103: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/103.jpg)
Use ferramentas e frameworks. <3
![Page 104: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/104.jpg)
Se você chegar nesse ponto...
![Page 105: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/105.jpg)
![Page 106: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/106.jpg)
DOUBLE RAINBOW ALL THE WAY
OMG SO INTENSE
![Page 107: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/107.jpg)
![Page 108: Arquitetura de Front-end em Aplicações de Larga Escala](https://reader033.fdocument.pub/reader033/viewer/2022051111/5550b033b4c905fa618b47c4/html5/thumbnails/108.jpg)
Thanks!@shiota | eshiota.com