Architecting Code on Large RWD Projects

"SDIJUFDUJOHDPEF PO MBSHF38%QSPKFDUT #FO'SBJO "VUIPS 3FTQPOTJWF8FC%FTJHOXJUI)5.-BOE$44 4FDPOE&EJUJPO 4BTTBOE$PNQBTTGPS%FTJHOFST )5.-$44DPEF

@benfrain #RWDSummit *WFXPSLFEPOUIF)5.-BOE$44PGUIFTBNF MBSHFTDBMF 38%QSPKFDUGPSBDPVQMFPGZFBST *UTBOBQQMJDBUJPOEFOTFXJUI6*DPNQPOFOUT FHOPUUFYUDPOUFOUIFBWZ

@benfrain #RWDSummit -BSHFOVNCFSPGIBOETPOUIF QSPKFDUPSUIFDPNQMFYJUZPGUIF QSPEVDU FHBXFCBQQ

@benfrain #RWDSummit 5VSOTPVUCVJMEJOHB3FTQPOTJWF 8FC%FTJHOJTFBTZ $PNQBSFEUPJUFSBUJOHBOENBJOUBJOJOHPOF 8SJUJOH$44JTOPUEJGGJDVMU,FFQJOHTUZMF TIFFUTTBOFPWFSUJNFJT

@benfrain #RWDSummit *USJFEUPBQQMZBDDFQUFEGSPOUFOEXJTEPN %3:PVUDPEF BCTUSBDUWJTVBMQBUUFSOTUP431 4JOHMF3FTQPOTJCJMJUZ1SJODJQMF DMBTTFT OPSNBMJTFEFTJHOT 00$44
4."$44FUD <div class="li-hor u-2o3 m-10"></div>

@benfrain #RWDSummit #VU#VJMEJOHGSPNBCTUSBDU$44 QBUUFSOTNBEFJUFSBUJPOTMPX

@benfrain #RWDSummit /FDFTTBSZUPBNFOE$44)5.-FBDI UJNFUIJOHTXFSFDIBOHFE 4PNFUJNFT431DMBTTFTOFFEFESFNPWJOH5IFO BOFXDMBTTBEEJOHKVTUUPHFUUIFSFRVJSFETUZMFT <div class="li-hor u-2o3 m-10"></div>
.actual { width: 66.666%; margin: 0 auto; @include MQ(Mplus) { width: 100%; } }

@benfrain #RWDSummit $44CFDBNFMPBEFEXJUITUZMFT BVUIPST JODMVEJOHNF XFSF GFBSGVMUPSFNPWF -PUTPGBCTUSBDUFEDMBTTFTUIBU XFSFMBSHFMZVOVTFE BOE
DPVMEOUCFDIBOHFESFNPWFE

@benfrain #RWDSummit 8JUIPVUUIFBCJMJUZUPTBGFMZSFNPWFVOOFFEFE DPEF UIFTUZMFTIFFUTHSFXCMPBUFE

@benfrain #RWDSummit .PWJOH DPNQPOFOUQBSUT XJUIJOUIFTJUF XBTCSJUUMF 4IBSJOHBDPNQPOFOUBDSPTT UFBNTXBTGSBVHIUTPNBOZ TUZMFEFQFOEFODJFT DPSSFDU
SFTFUT TIBSFEBCTUSBDUJPOT FUD

@benfrain #RWDSummit /POFPGUIFBDDFQUFE BQQSPBDIFTPSUFDIOJRVFT BDUVBMMZTPMWFENZQSPCMFNT <div class="li-hor grid-2of3 m-10"></div> *Admittedly,
it was not quite as dramatic as being betrayed by Robert The Bruce.

@benfrain #RWDSummit 5IFSFIBEUPCFBOPUIFSXBZ 4VCTFRVFOUMZ *WFCFFOPOBDPEF NBJOUFOBODFPEZTTFZ

@benfrain #RWDSummit *EMJLFUPTIBSF XJUIZPVTPNFPG UIFTPMVUJPOT* BSSJWFEBU "OENPSF JNQPSUBOUMZ 4PNFPGUIFCSJDL XBMMT*WFIJU

@benfrain #RWDSummit 5SJVNQIT

@benfrain #RWDSummit 1SPKFDUPSHBOJTBUJPO .PTUDPNNPO DPOWFOUJPOXIFO CVJMEJOHTJUFTJTUP HSPVQCZUFDIOPMPHZ *OUJNFJUCFDPNFT EJGGJDVMUUPMPDBUF DPOTUJUVFOUQBSUT

@benfrain #RWDSummit #ZDPNQPOFOU (SPVQGSPOUFOEDPEFCZ DPNQPOFOU SBUIFSUIBO UFDIOPMPHZ/FWFSOFTU BEEJUJPOBMGPMEFST %FQSFDBUFEBGFBUVSFPS DPNQPOFOU
5IFXIPMF GPMEFSDBOHP

@benfrain #RWDSummit .PSFXJOT

@benfrain #RWDSummit h 6TF BOEDPOGJHVSF BMJOUJOHUPPM +4)JOU $44MJOU TDTTMJOU h
,FFQBEJBSZBOEEPDT8*5)ZPVS QSPKFDU h &NCSBDFUPPMTMJLFCSPXTFSTZODJP GPSNVMUJCSPXTFSUFTUJOH h 6TF(JU.BLFZPVSDPXPSLFSTVTF JU3FHBSEMFTTPGXIBUZPVUIFZ VTFOPX

@benfrain #RWDSummit .JTUBLFT1JUGBMMT

@benfrain #RWDSummit h %POUVTFWFOEPSQSFGJYFT )PMB "VUPQSFGJYFS h "WPJEMJCSBSZNJYJOTUIFZUSBEF DPOWFOJFODFGPSVOEFSTUBOEJOH-BDL
QPSUBCJMJUZ h "WPJENBSLVQQBUUFSOTJO$44DPNNFOUT :PVSQBSUJBMOPXTJUTBMPOHTJEFUIF NBSLVQUFNQMBUF h "WPJEDMFWFSDPEF3FTPSUUPDPNQMFYJUZ BTBMBTUSFTPSU h $IFDLZPVSPVUQVU$44 JGQSF QSPDFTTJOH +

@benfrain #RWDSummit ",".ZOBNFJT#FO BOE*NBEEJDUFEUPUSZJOHOFXUPPMT 5PPMJOH

@benfrain #RWDSummit 5PPMTDBOIFMQZPVEFBMXJUIZPVSQSPCMFN UIFZ DBOOPUTPMWFJU 5SVFTUPSZPWFSIFBSEEFWFMPQFSTUBMLJOH 8F OFFEUPEFDJEFPOBQSFQSPDFTTPSTPXFDBOGJY PVS$44 #FXBSF:PVDBOIBWFNBJOUBJOBCMF$44GPS38%
QSPKFDUTXJUIBHPPEBQQSPBDIBOEOPQSF QSPDFTTPS5IFJOWFSTFJTOPUUSVF

@benfrain #RWDSummit %FGJOFZPVSOFFET WBSJBCMFT GVODUJPOT   5IFOQJDLBTVJUBCMFUFDIOPMPHZ  &YQFDUUPDIBOHFUPPMT (SVOU(VMQ8IBUFWFS .BLFTUZMFTIFFUTQPSUBCMF
$444OJQQFUT4BTT $PNQBTT-JC4BTT "VUPQSFGJYFS 1PTU$44 "VUPQSFGJYFS $BQBCJMJUZJTJNQPSUBOU UFDIOPMPHZJTOPU

@benfrain #RWDSummit &OEVSJOH$44

@benfrain #RWDSummit *UIJOL*WFUSJFEWJSUVBMMZFWFSZBQQSPBDIUPXSJUJOH NBJOUBJOBCMF$44 ¨$44BSDIJUFDUVSBMBQQSPBDIFT BSFUIFEJFUQJMMPGGSPOUFOE EFWFMPQFST© "OEDSFBUFETPNFBQQSPBDIFTCFTUMFGUVOEPDVNFOUFE "MUIPVHI*XJMMTIBSFPOF

@benfrain #RWDSummit *UXBTDBMMFE145 1PTJUJPO4USVDUVSF5IFNF

@benfrain #RWDSummit .BSLVQMPPLFEMJLFUIJT <div class=“p1 s3 t4"></div> "EWBOUBHFT5FSTF BCTUSBDU IJHIMZSFVTBCMF
431 %JTBEWBOUBHFT6OJOUFMMJHJCMF JNQPTTJCMFUPTFOTJCMZ BQQMZ38%FWFOUVBMJUJFT DON’T DO THIS

@benfrain #RWDSummit *NPGUIF TMJHIUMZDPOUSPWFSTJBM PQJOJPOUIBU431 00$44BCTUSBDUJPOTBSF38%BOENBJOUFOBODFBOUJ QBUUFSOT 8JUI38% DPNQPOFOUTPGUFOIBWFEJGGFSFOUWJTVBM USFBUNFOUTBUEJGGFSFOUTJ[FT
6TJOHDMBTTFTUIBUTQFDJGJDBMMZEFGJOFTUSVDUVSF QPTJUJPOPSUIFNFBSFJOIFSFOUMZQSPCMFNBUJDXIFO UIBUTUSVDUVSF QPTJUJPOPSUIFNFNBZOFFEUPDIBOHF

@benfrain #RWDSummit 0, IPUTIPU XIBUEP ZPVSFDPNNFOE *DBMMJU&OEVSJOH$44

@benfrain #RWDSummit ¨5XPZFBSTBHP*XSPUFBCPPLXIFSF*XBT QSFBDIJOH%3:DPEF CVUBGUFSXPSLJOHPOFOEVSJOH QSPKFDUT ##$/FXTBOEUIFHVBSEJBODPN JUT EFDPVQMJOHUIBUCFDBNFNPSFJNQPSUBOUUPNF© ,BFMJH%FMPVNFBV
'SPOUFOEEFWFMPQFS '5-BCT

@benfrain #RWDSummit 'MBUIJFSBSDIZPGTFMFDUPST 5PNJUJHBUFTFMFDUPSTQFDJGJDJUZyOPOFTUJOHGPSDPOUFYU /BNFTQBDFEDPNQPOFOUT 1SPWJEFTTFMGRVBSBOUJOJOHVOJUQSFWFOUTDPMMJTJPO NBLFT DPNQPOFOUTQPSUBCMFTJNQMFUPEFQSFDBUFSFNPWF /PSFTFUOPSNBMJ[FSVMFT &WFSZUIJOHJTTFMGDPOUBJOFE
&OEVSJOH$44IBMMNBSLT

@benfrain #RWDSummit /PBCTUSBDUJPO 'BWPVSFODBQTVMBUJPOPGTUZMFTPWFSBCTUSBDUJPOBOESF VTF &NCSBDFSFQFUJUJPO ([JQ'58 %POUOPSNBMJTF (PPEEFTJHOFSTEPOUDIBOHFUIJOHTBSCJUSBSJMZ$SFBUFB OFXDPNQPOFOUXIFOWJTVBMTEJWFSHF
"OUJ[FJUHFJTUQSJODJQMFT

@benfrain #RWDSummit &YBNQMFDPNQPOFOU <div class="hp-Callout_Wrapper"> <h1 class="hp-Callout_Title">The Title</h1> <img class="hp-Callout_Img"
src="hp- Callout_1.jpg/" srcset="[email protected] 2x" alt="Callout Hero"/> <p class="hp-Callout_Info">Product Info etc.</p> </div> $POWFOUJPODPOWFZTJODSFBTJOHHSBOVMBSJUZ WBHVFTQFDJGJD

@benfrain #RWDSummit .ip-SubHeader_Wrapper { @include Headline; @include FlexCenter; font-size: $text12;
background-color: $color-grey-54; border-bottom: 1px solid hsbbrighten($color-grey-54, -3); min-height: $size-fine-quadruple; @include MQ(Mplus) { background-color: $color-grey-a7; color: $color-grey-54; font-size: $text13; min-height: 22px; border-bottom: 1px solid $color-grey-54; border-top: 1px solid transparentize($color-white, .85); } } 0OFSVMFUPEFGJOFUIFNBMM

@benfrain #RWDSummit &SS#MPBU 1SPEVDUJPO$44GJMFVTJOH&OEVSJOH$44NFUIPET XFJHIFEJOBU,# ([JQQFE .flex { display:
-webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .flex-center { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } 3FQFBUFEUJNFT 3FQFBUFEUJNFT "CTUSBDUJOHUPB00$44DMBTTTBWFEKVTU,# GJMFTJ[F,# ([JQQFE

@benfrain #RWDSummit %FDJEFPOBOBNJOHDPOWFOUJPO  PSQJDLBCBUUMFUFTUFEGPSNBUMJLF#&. .namespace-Component_ComponentSection-variant { /* Styles */
} "OEFOGPSDFJU var testPattern = new RegExp("/\.(\w*)+\-+(([A-Z][a-z]+)+$)/g");

@benfrain #RWDSummit #PSSPXTUFBMVTFGVMDPOWFOUJPOTBOE BQQSPBDIFT .oc-Menu_Wrapper { /* All the Styles
*/ transition: transform .35s; // Modernizr until @supports is ubiquitous .csstransforms3d & { transform: translate3d(0, -200px, 0); transition: transform .35s; } // When Off Canvas invoked: .has-OffCanvasActive.csstransforms3d & { transform: translate3d(0, 0, 0); } }

@benfrain #RWDSummit &OEVSJOH$44 IUUQCFOGSBJOR /BNJOHSBUJPOBMF IUUQCFOGSBJOJ "SHVJOHBHBJOTU00$44"UPNJD$44GPS38% IUUQCFOGSBJOK .PSFPO&OEVSJOH$44

@benfrain #RWDSummit 8IFSFJO*IPQFUPOPUTPVOEQBUSPOJTJOH 'BUIFSMZBEWJDF

@benfrain #RWDSummit 4PMWFZPVSPXOQSPCMFNT*GZPVTPMWFZPVS PXOQSPCMFNTZPVDBOOPUCFEPJOHJUXSPOH 1BSTFJOGPSNBUJPOJOSFMBUJPOUPZPVSDPOUFYU .ZTPMVUJPOTTPMWFQSPCMFNT*IBE5IPTF QSPCMFNTNBZOPUBMJHOXJUIZPVST "UUIFPVUTFU EFGJOFUIFDIBSBDUFSJTUJDTZPV XJTIUPCFJOIFSFOUJOZPVSDPEFCBTF

@benfrain #RWDSummit 1MFOUZPGTNBSUQFPQMFJOUFSFTUFE $44BSDIJUFDUVSF5IFJSTPMVUJPOT BQQSPBDIFTNBZCFNPSFBQUGPS ZPVSTDFOBSJP JOOPQBSUJDVMBSPSEFS !OFDPMBT /JDPMBT(BMMBHIFS
!TUVCCFSOFMMB /JDPMF4VMMJWBO !TOPPLDB +POBUIBO4OPPL !UIJFSSZLPCMFOU[ 5IJFSSZ,PCMFOU[   !DTTXJ[BSESZ )BSSZ3PCFSUT !LBFMJH ,BFMJH%FMPVNFBV

@benfrain #RWDSummit 4VNNBSZ

@benfrain #RWDSummit 4PPOXFXJMMIBWFXFCDPNQPOFOUT TUZMF FODBQTVMBUJPOBTTUBOEBSE *OUIFNFBOUJNFXFOFFEUPEFWJTFXBZTUP LFFQDPEFNBJOUBJOBCMFGPSPVSTFMWFTBOE TVCTFRVFOUMZUSJNGPSPVSVTFST 5IFSFBSFNBOZXBZTUPEPUIJT'JOEZPVST

@benfrain #RWDSummit %PDVNFOUUIFQSPCMFNTZPV IBWFBOETIBSFUIFTPMVUJPOT ZPVBSSJWFBU

5IF&OE 5IBOLZPVGPSZPVSBUUFOUJPO !CFOGSBJO CFOGSBJODPN .Z#PPLT 4PDJBM8FC

Architecting Code on Large RWD Projects

Architecting Code on Large RWD Projects

More Decks by Ben Frain

Other Decks in Programming

Featured

Transcript