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
GPMD - Our Journey
Search
Matt Bailey
April 22, 2015
Technology
0
71
GPMD - Our Journey
Our technical journey over the past three years - where we've come from and what's next.
Matt Bailey
April 22, 2015
Tweet
Share
More Decks by Matt Bailey
See All by Matt Bailey
How I acheived a pretty good Google PageSpeed Insights score
mattbailey
1
130
Front End Workflow
mattbailey
2
1.3k
Workshop: Making Responsive Websites Fast
mattbailey
0
56
Other Decks in Technology
See All in Technology
Shadow DOM & Security - Exploring the boundary between light and shadow
masatokinugawa
0
740
東京海上日動におけるセキュアな開発プロセスの取り組み
miyabit
0
190
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
i35_267
6
310
From Live Coding to Vibe Coding with Firebase Studio
firebasethailand
1
290
新規事業におけるAIリサーチの活用例
ranxxx
0
170
「育てる」サーバーレス 〜チーム開発研修で学んだ、小さく始めて大きく拡張するAWS設計〜
yu_kod
1
100
robocopy の怖い話/scary-story-about-robocopy
emiki
0
380
(HackFes)米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
5
670
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
cygames
PRO
1
160
Wasmで社内ツールを作って配布しよう
askua
0
150
AWS表彰プログラムとキャリアについて
naoki_0531
1
140
AIを使っていい感じにE2Eテストを書けるようになるまで / Trying to Write Good E2E Tests with AI
katawara
3
1.8k
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Rails Girls Zürich Keynote
gr2m
95
14k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Typedesign – Prime Four
hannesfritz
42
2.7k
Agile that works and the tools we love
rasmusluckow
329
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Balancing Empowerment & Direction
lara
1
500
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Building an army of robots
kneath
306
45k
Transcript
Our Journey
Where have we come from?
Design • Style tiles • More focus on component based
design • Move into browser quicker
Responsive Web Design • First RWD site: The Watch Gallery
• One site for every screen • Mobile first and content first • Media queries • Adaptive and fluid layouts
CSS Preprocessors • First Less… • … Then Sass •
Huge increase in efficiency • Like working with a proper programming language
Frontend Frameworks • HTML5 Boilerplate • Bootstrap • Foundation •
Time saving… • … But can lead to ‘bloat’
CSS Coding Style • BEM (Block, Element and Modifier) •
ITCSS (Inverted Triangle CSS) • Clearer, cleaner code • Much more modular • Easier to reuse
New CSS Stuff • The picture element • Flexbox
Task Management • Grunt • BIMA tasks: autoprefixer, clean, concat,
concurrent, copy, imagemin, jshint, modernizr, sass, scsslint, symlink, uglify and watch.
Package Management • Composer • NPM • Bower
Documentation • Style guides • Pattern libraries • Component libraries
• Hackpad
Automation • Set up scripts • environment specific frontend builds
• Githooks • Deployment with Fabric
Testing • TDD • BDD
Virtual Machines • Vagrant • Great idea in principle •
Worked well for a time • Mostly borked now • Need to simplify and lock down dependencies
Performance • Critical Rendering Path • Code quality • Code
efficiency • Code reviews
What’s next?
More Efficiency
More Automation • Magento and SilverStripe ‘products’ • Tools like
Yeoman for project scaffolding
More Documentation • Automated style guides • Automated component libraries
• Git merge requests
Modular, Reusable Code • Our own Github projects, Bower components,
Composer modules • Less time spent on repetitive tasks • Less reliance on frameworks • Leaner, better code
More Performance • The new ‘in’ thing • It’s not
going to go away • Tools such as sitespeed.io • StyleStats
More Testing • Visual Regression Testing • PhantomCSS • BackstopJS
Code Style & Quality • More scss-lint • Merge requests
and code reviews
More Virtual Machines • Done properly • Vagrant, Docker? •
Virtual Box, VMWare? • In the cloud: Koding, Cloud9?
Better Deployment • Build server? • CI?
We’ve come a long way
We’re going even further
It requires a team effort
Thank you for all your hard word
Goodbye