Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WWW Platform - Modern Landscape
Search
Adrian Aguirre
October 20, 2014
0
35
WWW Platform - Modern Landscape
Adrian Aguirre
October 20, 2014
Tweet
Share
More Decks by Adrian Aguirre
See All by Adrian Aguirre
WWW Platform - Legacy Landscape
adrianaguirre
0
40
Featured
See All Featured
A designer walks into a library…
pauljervisheath
201
23k
Happy Clients
brianwarren
92
6.4k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
Infographics Made Easy
chrislema
238
18k
How GitHub (no longer) Works
holman
305
140k
Designing Experiences People Love
moore
136
23k
The Cost Of JavaScript in 2023
addyosmani
21
3.9k
YesSQL, Process and Tooling at Scale
rocio
165
13k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
What's new in Ruby 2.0
geeforr
337
31k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
33
6k
Transcript
WWW Platform _modern landscape
[ ingredients ]
[ wp-multisite ]....
letʼs us manage multiple wordpress sites through one admin network.
video - create subsite
giveʼs LifeLock teams the ability to manage their own page
creation.
video - create page from template
giveʼs LifeLock teams the ability to manage their own page
content.
video - manage page content floodlight tags editable background images
editable text- tfn, cta, copy
giveʼs LifeLock teams the ability to manage press releases
video - manage press releases
giveʼs LifeLock teams the ability to manage upcoming events
video - manage upcoming events
WWW subsites / - Manage WWW /education - Manage ID101
/pr - Manage Press Releases
WWW Campaigning subsites /dm - Digital Marketing /offers - Partner
/rn - DM / Right Now
with every adventure, there comes some challenges
[challenge]
[optimization]
page speed
code redundancy
scalability
[ ingredients ] we need more
[ sass ] [ sass ]....
css files are getting larger.
more complex
harder to maintain
this is where [ sass] comes in..
[sass] letʼs us use features that don't exist in CSS
yet
variables, nesting, mixins, inheritance and others
video - sass globals: typography, extensions, sprites?
using pre-processed css enhances our ability to...
ACHIEVE OUR PERFORMANCE GOALS
to be optimal, we need to be modular.
the importance of modular architecture
helps with code convention, easier to leverage global elements
ships to QA/QE quicker. easier to debug
focuses on detail
mitigates regression
using sass, json, and html templating....
we can create reusable [modules]
[mySQL] a mutual relationship [ php] [json ]
get data faster?
several server calls [ ] mySQL] [ php
one call & cached?
this is where [ json & php] comes in..
[ php][ json]....
create a json controller
None
execute json using wp-api
wp-admin
[json ]
this is where { mustache } comes in..
{ mustache }....
Mustache? What?
Mustache is a simple logic-less template engine.
template : * {{ name }} * {{ age }}
* {{ company }} * {{{ company }}}
Use key => value to associate data to template
data : array( 'name' => "Chris", 'company' => '<b>GitHub</b>', );
output: * Chris * * <b>GitHub</b> * <b>GitHub</b>
only create a few html templates
data drives the view,
better performance
What does the final flow look like?
json_api_controllers curl json-api parse for mustache bind to mustache template
data defines pageview WordPress / mySQL browser render end-user content input < < < <