SlideShare ist ein Scribd-Unternehmen logo
1 von 144
Downloaden Sie, um offline zu lesen
OPTIMISING YOUR
FRONT END
WORKFLOW
MATTHEW
DAVIS
@mdavis1982
PhpSpec

phpspec/nyan-formatters
PhpSpec

R!
WW
AW
R
phpspec/nyan-formatters
Terrible at jokes
Terrible at jokes

Sorry!
Advances in back end code
D
DD

COM
POSI
TION
ENICS
STH
CALI

Advances in back end code
Y
R
D

TDD

PSR

ES
FAC
TER
IN

SOLID
COMPOSER
When we look at front end code

Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Cool tools for front end code
BOWER

S
S
LE
SASS

ANGULAR

GRU

NT
I PT
R for front end code
SC
E tools
Cool
FFE
CO
IG
W
GU
T
LP
N
MA
EO
Y
REQUI
RE JS
* more
And a GAZILLION
* more
And a GAZILLION

*approximately
Lack of practical examples
😱
Let’s change that!
😄
Example Project

https://github.com/mdavis1982/workflow
Example Project
Simple Article Management

https://github.com/mdavis1982/workflow
Example Project
Simple Article Management
Administration Area
https://github.com/mdavis1982/workflow
Twig
Insanely powerful
Insanely powerful
Compiled and cached
Insanely powerful
Compiled and cached
Often overlooked
Translate all the things
Translations are notoriously
messy
But it’s easy to keep them
organised
config.yml

framework:‹
translator:

{ fallback: "%locale%" }
Article.php
/**‹
* The title of the Article‹
*‹
* @var string‹
*‹
* @ORMColumn(type="string", length=255)‹
*‹
* @AssertNotBlank(message="article.title.not_blank")‹
* @AssertLength(‹
*
max=255,‹
*
maxMessage="article.title.length.max"‹
* )‹
*/‹
protected $title;
validators.en.yml
article:‹
title:‹
not_blank: You must enter a title‹
length:‹
max: The title cannot be longer than {{ limit }}
characters‹
‹
content:‹
not_blank: You must enter some content‹
ArticleType.php
$builder‹
->add(‹
'title',‹
'text',‹
[‹
'label' => 'article.label.title'‹
]‹
)
ArticleType.php
$builder‹
->add(‹
'title',‹
'text',‹
[‹
'label' => 'article.label.title'‹
]‹
)	

For all properties in the form
forms.en.yml
article:‹
label:‹
title: Title‹
content: Content‹
submit: Save‹
forms.en.yml?!
ArticleType.php
/**‹
* {@inheritdoc}‹
*/‹
public function setDefaultOptions(OptionsResolverInterface $resolver)‹
{‹
$resolver->setDefaults([‹
'data_class'
=> 'MDEntityArticle',‹
'translation_domain' => 'forms'‹
]);‹
}
Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
When your translations don’t
work

CLEAR THE CACHE!
CLEAR THE CACHE!

Even in the dev environment
Translate everything
Translate everything
All titles, actions, single words
Translate everything
All titles, actions, single words
Translations per ‘section’
admin.en.yml
article:‹
title:‹
list: All Articles‹
create: Add a New Article‹
‹
action:‹
create: Add New‹
cancel: Cancel‹
list.html.twig
{% block body %}‹
<h1>{{ 'article.title.list'|trans({}, 'admin') }}</h1>‹
{% if articles %}‹
<ul class="articles">‹
{% for article in articles %}‹
<li>{{ article.title }}</li>‹
{% endfor %}‹
</ul>‹
{% endif %}‹
‹
<a href="{{ path('admin.article.create') }}”>	
{{ 'article.action.create'|trans({}, 'admin') }}	
</a>‹
{% endblock body %}
Messy
Template Inheritance
Default base template
base.html.twig
<!DOCTYPE html>‹
<html>‹
<head>‹
<meta charset="UTF-8" />‹
<title>{% block title %}Welcome!{% endblock %}</title>‹
{% block stylesheets %}{% endblock %}‹
<link rel="icon" type="image/x-icon"
href="{{ asset('favicon.ico') }}" />‹
</head>‹
<body>‹
{% block body %}{% endblock %}‹
{% block javascripts %}{% endblock %}‹
</body>‹
</html>
Doesn’t promote great code
base.html.twig
<!doctype html>‹
‹
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6 lt-ie9 lt-ie8 lt-ie7"> <![endif]-->‹
<!--[if IE 7 ]>
<html lang="en" class="no-js ie7 lt-ie9 lt-ie8"> <![endif]-->‹
<!--[if IE 8 ]>
<html lang="en" class="no-js ie8 lt-ie9"> <![endif]-->‹
<!--[if IE 9 ]>
<html lang="en" class="no-js ie9"> <![endif]-->‹
<!--[if (gt IE 9)|!(IE)]><!-->‹
<html lang="en" class="no-js"><!--<![endif]-->‹
<head>‹
<meta charset="utf-8" />‹
<title>{% block title %}{% endblock title %}</title>‹
‹
<!-- Set up mobile viewport for responsive design -->‹
<meta name="viewport" content="width=device-width" />‹
‹
{% block stylesheets %}{% endblock stylesheets %}‹
</head>‹
<body>‹
{% block content %}{% endblock content %}‹
{% block javascripts %}{% endblock javascripts %}‹
</body>‹
</html>‹
Gives us a better foundation
Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
The same HTML structure and
assets per ‘section’?
New ‘Layouts’ Directory
Directory Structure
admin.html.twig
{% extends "::base.html.twig" %}‹
‹
{% block title %}	
{{ 'defaults.title'|trans({}, 'admin') }}	
{% endblock title %}‹
‹
{% block content %}‹
{% block body %}{% endblock body %}‹
{% endblock content %}‹
frontend.html.twig
{% extends "::base.html.twig" %}‹
‹
{% block title %}{{ 'defaults.title'|trans }}{% endblock title %}‹
‹
{% block content %}‹
{% block header %}{% endblock header %}‹
{% block body %}{% endblock body %}‹
{% block footer %}{% endblock footer %}‹
{% endblock content %}
What?!
Change the extends
list.html.twig
{% extends "MDMainBundle:Layouts:admin.html.twig" %}‹
‹
{% block body %}‹
<h1>{{ 'article.title.list'|trans({}, 'admin') }}</h1>‹
{% if articles %}‹
<ul class="articles">‹
{% for article in articles %}‹
<li>{{ article.title }}</li>‹
{% endfor %}‹
</ul>‹
{% endif %}‹
‹
<a href="{{ path('admin.article.create') }}”>	
{{ 'article.action.create'|trans({}, 'admin') }}	
</a>‹
{% endblock body %}‹
Given ourselves flexible base
Given ourselves flexible base
All boilerplate code is DRY
Given ourselves flexible base
All boilerplate code is DRY
Defaults per ‘section’
trans_default_domain
list.html.twig
{% extends "MDMainBundle:Layouts:admin.html.twig" %}‹
‹
{% trans_default_domain "admin" %}‹
‹
{% block body %}‹
<h1>{{ 'article.title.list'|trans }}</h1>‹
{% if articles %}‹
<ul class="articles">‹
{% for article in articles %}‹
<li>{{ article.title }}</li>‹
{% endfor %}‹
</ul>‹
{% endif %}‹
‹
<a href="{{ path('admin.article.create') }}”>	
{{ 'article.action.create'|trans }}	
</a>‹
{% endblock body %}‹
But wait!
admin.html.twig

{% trans_default_domain "admin" %}
NOPE
And it won’t be fixed
Node.js

http://nodejs.org
Node.js
Server-side JavaScript

http://nodejs.org
Node.js
Server-side JavaScript
Adds extra functionality
http://nodejs.org
npm
npm
Composer for node
npm
Composer for node
Install globally or into project
OMG!!1!
Bower

http://bower.io
Demo:
Installing Bower With No Sudo - Eek!
👎
Demo:
Installing Bower Successfully - Yay!
👍
Getting stuff into your project
Find dependencies
Demo:
Using Bower To Search For Packages - Modernizr
Install dependencies
Demo:
Using Bower To Install Packages - Modernizr
We can do better
.bowerrc
Demo:
Using .bowerrc To Customise Installation Directory
Better
Better
Save dependencies
bower.json
Demo:
Using Bower To Save Dependencies To bower.json
Don’t forget .gitignore
Easy to reference assets
Easy to reference assets
{% block javascripts %}
<script src="{{ asset('/vendor/modernizr/modernizr.js') }}"></script>
{% endblock javascripts %}
Easy to reference assets
{% block javascripts %}
<script src="{{ asset('/vendor/modernizr/modernizr.js') }}"></script>
{% endblock javascripts %}

Globally or per ‘section’
Different locations?
Non-standard install
Non-standard install
Make it clear
Non-standard install
Make it clear
Potentially more flexibility
Gulp

http://gulpjs.com
Build tool
“

Every week someone who doesn’t
understand Make writes a new build
system in JavaScript.
#gruntjs #gearjs #gulpjs #broccolijs.
Laugh or cry?
https://twitter.com/aslak_hellesoy/status/435506106496851968
Streaming
Plugin architecture
Demo:
Installing Gulp Globally With npm
One extra step
Demo:
Installing Gulp and Gulp-Util Into A Project With npm
Don’t forget .gitignore
Minify JavaScript
Demo:
Using Gulp To Minify JavaScript
Use it in our project
frontend.html.twig

{% block javascripts %}‹
<script src="{{ asset('/web/js/vendor/modernizr.js') }}"></script>‹
{% endblock javascripts %}
ITCHY NOSE!!!
We have 2 copies in web/
We have 2 copies in web/
Bower install to /assets/vendor
We have 2 copies in web/
Bower install to /assets/vendor
Prevents source being public
(S)CSS
Normal SCSS workflow
frontend.scss
@import "assets/vendor/normalize-scss/normalize";‹
‹
$body-width: 60% !default;‹
‹
body‹
{‹
width: $body-width;‹
margin: 0 auto;‹
}‹
gulpfile.js
var scss = require('gulp-sass');	
!
!
gulp.task('scss', function() {‹
return gulp.src('assets/scss/*.scss')‹
.pipe(scss())‹
.pipe(gulp.dest('web/css'));‹
});
frontend.html.twig

{% block stylesheets %}‹
<link rel="stylesheet" href="{{ asset('/css/frontend.css') }}" />‹
{% endblock stylesheets %}
matt at Chloe in ~/Sites/workflow.dev on dev *	
🍔 $ gulp scss	
[gulp] Using file /Users/matt/Sites/workflow.dev/gulpfile.js	
[gulp] Working directory changed to /Users/matt/Sites/workflow.dev	
[gulp] Running 'scss'...	
[gulp] Finished 'scss' in 11 ms
Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Running commands manually
gets old real fast
Watching!
gulpfile.js

gulp.task('watch', function() {‹
gulp.watch('assets/scss/**/*.scss', ['scss']);‹
});
Demo:
Gulp Watch In Action
Awesomesauce!
Only scratching the surface!
Gulp plugins
TESTS

T
IN
L

CONCAT
ONS plugins
ATIGulp
IFIC
OT
N
IG
W
T
SE
I
TIM
BROW
P
O
SERIF
Y

RENAME

COP
Y

GI

T
Custom actions are easy
Setting up a project can be
tedious
Can be taken much further!
GAZILLIONS of tools available
GAZILLIONS of tools available
Don’t use all of them!
Plan it!
Plan it!

**groan**
Questions?
Thanks!
@mdavis1982

Weitere Àhnliche Inhalte

Was ist angesagt?

Kafka Tutorial - introduction to the Kafka streaming platform
Kafka Tutorial - introduction to the Kafka streaming platformKafka Tutorial - introduction to the Kafka streaming platform
Kafka Tutorial - introduction to the Kafka streaming platformJean-Paul Azar
 
The Paved PaaS to Microservices at Netflix (IAS2017 Nanjing)
The Paved PaaS to Microservices at Netflix (IAS2017 Nanjing)The Paved PaaS to Microservices at Netflix (IAS2017 Nanjing)
The Paved PaaS to Microservices at Netflix (IAS2017 Nanjing)Yunong Xiao
 
Workflow Engines & Event Streaming Brokers - Can they work together? [Current...
Workflow Engines & Event Streaming Brokers - Can they work together? [Current...Workflow Engines & Event Streaming Brokers - Can they work together? [Current...
Workflow Engines & Event Streaming Brokers - Can they work together? [Current...Natan Silnitsky
 
Orchestration vs Choreography - A Guide To Composing Your Monolith
Orchestration vs Choreography - A Guide To Composing Your MonolithOrchestration vs Choreography - A Guide To Composing Your Monolith
Orchestration vs Choreography - A Guide To Composing Your MonolithIan Thomas
 
Smart Digital Receipts OnePass
Smart Digital Receipts OnePassSmart Digital Receipts OnePass
Smart Digital Receipts OnePassconfluent
 

Was ist angesagt? (6)

Kafka Tutorial - introduction to the Kafka streaming platform
Kafka Tutorial - introduction to the Kafka streaming platformKafka Tutorial - introduction to the Kafka streaming platform
Kafka Tutorial - introduction to the Kafka streaming platform
 
The Paved PaaS to Microservices at Netflix (IAS2017 Nanjing)
The Paved PaaS to Microservices at Netflix (IAS2017 Nanjing)The Paved PaaS to Microservices at Netflix (IAS2017 Nanjing)
The Paved PaaS to Microservices at Netflix (IAS2017 Nanjing)
 
Container Patterns
Container PatternsContainer Patterns
Container Patterns
 
Workflow Engines & Event Streaming Brokers - Can they work together? [Current...
Workflow Engines & Event Streaming Brokers - Can they work together? [Current...Workflow Engines & Event Streaming Brokers - Can they work together? [Current...
Workflow Engines & Event Streaming Brokers - Can they work together? [Current...
 
Orchestration vs Choreography - A Guide To Composing Your Monolith
Orchestration vs Choreography - A Guide To Composing Your MonolithOrchestration vs Choreography - A Guide To Composing Your Monolith
Orchestration vs Choreography - A Guide To Composing Your Monolith
 
Smart Digital Receipts OnePass
Smart Digital Receipts OnePassSmart Digital Receipts OnePass
Smart Digital Receipts OnePass
 

Andere mochten auch

Automating Large Applications on Modular and Structured Form with Gulp
Automating Large Applications on Modular and Structured Form with GulpAutomating Large Applications on Modular and Structured Form with Gulp
Automating Large Applications on Modular and Structured Form with GulpAnderson Aguiar
 
Twig tips and tricks
Twig tips and tricksTwig tips and tricks
Twig tips and tricksJavier Eguiluz
 
Front-end style guides - fronteers @ WHITE (30/08/12)
Front-end style guides - fronteers @ WHITE (30/08/12)Front-end style guides - fronteers @ WHITE (30/08/12)
Front-end style guides - fronteers @ WHITE (30/08/12)Stijn Janssen
 
Managing packages with Bower and NuGet in ASP.NET Core
Managing packages with Bower and NuGet in ASP.NET CoreManaging packages with Bower and NuGet in ASP.NET Core
Managing packages with Bower and NuGet in ASP.NET CorePhilip Domingo
 
Frontend asset management with Bower and Gulp.js
Frontend asset management with Bower and Gulp.jsFrontend asset management with Bower and Gulp.js
Frontend asset management with Bower and Gulp.jsRenan Gonçalves
 
Async navigation with a lightweight ES6 framework
Async navigation with a lightweight ES6 frameworkAsync navigation with a lightweight ES6 framework
Async navigation with a lightweight ES6 frameworksparkfabrik
 
Introduction to Twig
Introduction to TwigIntroduction to Twig
Introduction to Twigmarkstory
 
Front end engineering, YUI Gallery, and your future
Front end engineering, YUI Gallery, and your futureFront end engineering, YUI Gallery, and your future
Front end engineering, YUI Gallery, and your futureLuke Smith
 
Front-End Intelligence
Front-End IntelligenceFront-End Intelligence
Front-End IntelligenceJudy T Raj
 
Workflow User Interfaces Patterns
Workflow User Interfaces PatternsWorkflow User Interfaces Patterns
Workflow User Interfaces PatternsJean Vanderdonckt
 
Unit testing of java script and angularjs application using Karma Jasmine Fra...
Unit testing of java script and angularjs application using Karma Jasmine Fra...Unit testing of java script and angularjs application using Karma Jasmine Fra...
Unit testing of java script and angularjs application using Karma Jasmine Fra...Samyak Bhalerao
 
Joget Workflow v5 Training Slides - Module 18 - Integrating with External System
Joget Workflow v5 Training Slides - Module 18 - Integrating with External SystemJoget Workflow v5 Training Slides - Module 18 - Integrating with External System
Joget Workflow v5 Training Slides - Module 18 - Integrating with External SystemJoget Workflow
 
Introduction to Express and Grunt
Introduction to Express and GruntIntroduction to Express and Grunt
Introduction to Express and GruntPeter deHaan
 
Insights on Protractor testing
Insights on Protractor testingInsights on Protractor testing
Insights on Protractor testingDejan Toteff
 
Workflows im Unternehmenseinsatz - Am Beispiel des Onboarding-Prozesses / Ein...
Workflows im Unternehmenseinsatz - Am Beispiel des Onboarding-Prozesses / Ein...Workflows im Unternehmenseinsatz - Am Beispiel des Onboarding-Prozesses / Ein...
Workflows im Unternehmenseinsatz - Am Beispiel des Onboarding-Prozesses / Ein...busitec GmbH
 
DIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development todayDIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development todayBojan Veljanovski
 
React + Flux (Alt)
React + Flux (Alt)React + Flux (Alt)
React + Flux (Alt)Cezar Luiz
 
Drupal 8: frontend development
Drupal 8: frontend developmentDrupal 8: frontend development
Drupal 8: frontend developmentsparkfabrik
 
Fast Prototyping Strategies for UI design
Fast Prototyping Strategies for UI designFast Prototyping Strategies for UI design
Fast Prototyping Strategies for UI designLuis Daniel Rodriguez
 

Andere mochten auch (20)

Automating Large Applications on Modular and Structured Form with Gulp
Automating Large Applications on Modular and Structured Form with GulpAutomating Large Applications on Modular and Structured Form with Gulp
Automating Large Applications on Modular and Structured Form with Gulp
 
Twig tips and tricks
Twig tips and tricksTwig tips and tricks
Twig tips and tricks
 
Front-end style guides - fronteers @ WHITE (30/08/12)
Front-end style guides - fronteers @ WHITE (30/08/12)Front-end style guides - fronteers @ WHITE (30/08/12)
Front-end style guides - fronteers @ WHITE (30/08/12)
 
Love Twig
Love TwigLove Twig
Love Twig
 
Managing packages with Bower and NuGet in ASP.NET Core
Managing packages with Bower and NuGet in ASP.NET CoreManaging packages with Bower and NuGet in ASP.NET Core
Managing packages with Bower and NuGet in ASP.NET Core
 
Frontend asset management with Bower and Gulp.js
Frontend asset management with Bower and Gulp.jsFrontend asset management with Bower and Gulp.js
Frontend asset management with Bower and Gulp.js
 
Async navigation with a lightweight ES6 framework
Async navigation with a lightweight ES6 frameworkAsync navigation with a lightweight ES6 framework
Async navigation with a lightweight ES6 framework
 
Introduction to Twig
Introduction to TwigIntroduction to Twig
Introduction to Twig
 
Front end engineering, YUI Gallery, and your future
Front end engineering, YUI Gallery, and your futureFront end engineering, YUI Gallery, and your future
Front end engineering, YUI Gallery, and your future
 
Front-End Intelligence
Front-End IntelligenceFront-End Intelligence
Front-End Intelligence
 
Workflow User Interfaces Patterns
Workflow User Interfaces PatternsWorkflow User Interfaces Patterns
Workflow User Interfaces Patterns
 
Unit testing of java script and angularjs application using Karma Jasmine Fra...
Unit testing of java script and angularjs application using Karma Jasmine Fra...Unit testing of java script and angularjs application using Karma Jasmine Fra...
Unit testing of java script and angularjs application using Karma Jasmine Fra...
 
Joget Workflow v5 Training Slides - Module 18 - Integrating with External System
Joget Workflow v5 Training Slides - Module 18 - Integrating with External SystemJoget Workflow v5 Training Slides - Module 18 - Integrating with External System
Joget Workflow v5 Training Slides - Module 18 - Integrating with External System
 
Introduction to Express and Grunt
Introduction to Express and GruntIntroduction to Express and Grunt
Introduction to Express and Grunt
 
Insights on Protractor testing
Insights on Protractor testingInsights on Protractor testing
Insights on Protractor testing
 
Workflows im Unternehmenseinsatz - Am Beispiel des Onboarding-Prozesses / Ein...
Workflows im Unternehmenseinsatz - Am Beispiel des Onboarding-Prozesses / Ein...Workflows im Unternehmenseinsatz - Am Beispiel des Onboarding-Prozesses / Ein...
Workflows im Unternehmenseinsatz - Am Beispiel des Onboarding-Prozesses / Ein...
 
DIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development todayDIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development today
 
React + Flux (Alt)
React + Flux (Alt)React + Flux (Alt)
React + Flux (Alt)
 
Drupal 8: frontend development
Drupal 8: frontend developmentDrupal 8: frontend development
Drupal 8: frontend development
 
Fast Prototyping Strategies for UI design
Fast Prototyping Strategies for UI designFast Prototyping Strategies for UI design
Fast Prototyping Strategies for UI design
 

Ähnlich wie Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp

[Bristol WordPress] Supercharging WordPress Development
[Bristol WordPress] Supercharging WordPress Development[Bristol WordPress] Supercharging WordPress Development
[Bristol WordPress] Supercharging WordPress DevelopmentAdam Tomat
 
cdac@parag.gajbhiye@test123
cdac@parag.gajbhiye@test123cdac@parag.gajbhiye@test123
cdac@parag.gajbhiye@test123Parag Gajbhiye
 
Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsdayFrancesco Fullone
 
Modern Web Application Development Workflow - EclipseCon France 2014
Modern Web Application Development Workflow - EclipseCon France 2014Modern Web Application Development Workflow - EclipseCon France 2014
Modern Web Application Development Workflow - EclipseCon France 2014Stéphane Bégaudeau
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrMichael Enslow
 
Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)Joao Lucas Santana
 
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...tdc-globalcode
 
Front End Development for Back End Developers - Devoxx UK 2017
 Front End Development for Back End Developers - Devoxx UK 2017 Front End Development for Back End Developers - Devoxx UK 2017
Front End Development for Back End Developers - Devoxx UK 2017Matt Raible
 
Profiling PHP with Xdebug / Webgrind
Profiling PHP with Xdebug / WebgrindProfiling PHP with Xdebug / Webgrind
Profiling PHP with Xdebug / WebgrindSam Keen
 
Familiar HTML5 - äș‹äŸ‹ăšă‚”ăƒłăƒ—ăƒ«ă‚łăƒŒăƒ‰ă‹ă‚‰ć­Šă¶ èș«èż‘ă§æ™źé€šă«äœżă‚ăŠă„ă‚‹HTML5
Familiar HTML5 - äș‹äŸ‹ăšă‚”ăƒłăƒ—ăƒ«ă‚łăƒŒăƒ‰ă‹ă‚‰ć­Šă¶ èș«èż‘ă§æ™źé€šă«äœżă‚ăŠă„ă‚‹HTML5Familiar HTML5 - äș‹äŸ‹ăšă‚”ăƒłăƒ—ăƒ«ă‚łăƒŒăƒ‰ă‹ă‚‰ć­Šă¶ èș«èż‘ă§æ™źé€šă«äœżă‚ăŠă„ă‚‹HTML5
Familiar HTML5 - äș‹äŸ‹ăšă‚”ăƒłăƒ—ăƒ«ă‚łăƒŒăƒ‰ă‹ă‚‰ć­Šă¶ èș«èż‘ă§æ™źé€šă«äœżă‚ăŠă„ă‚‹HTML5Sadaaki HIRAI
 
Geek Moot '09 -- Smarty 101
Geek Moot '09 -- Smarty 101Geek Moot '09 -- Smarty 101
Geek Moot '09 -- Smarty 101Ted Kulp
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSSdanpaquette
 
Use Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsUse Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsNathan Smith
 
Intro To Django
Intro To DjangoIntro To Django
Intro To DjangoUdi Bauman
 
How to Webpack your Django!
How to Webpack your Django!How to Webpack your Django!
How to Webpack your Django!David Gibbons
 
Introduce Django
Introduce DjangoIntroduce Django
Introduce DjangoChui-Wen Chiu
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web DesignChristopher Schmitt
 

Ähnlich wie Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp (20)

[Bristol WordPress] Supercharging WordPress Development
[Bristol WordPress] Supercharging WordPress Development[Bristol WordPress] Supercharging WordPress Development
[Bristol WordPress] Supercharging WordPress Development
 
Using HTML5 sensibly
Using HTML5 sensiblyUsing HTML5 sensibly
Using HTML5 sensibly
 
Going web native
Going web nativeGoing web native
Going web native
 
cdac@parag.gajbhiye@test123
cdac@parag.gajbhiye@test123cdac@parag.gajbhiye@test123
cdac@parag.gajbhiye@test123
 
Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsday
 
Modern Web Application Development Workflow - EclipseCon France 2014
Modern Web Application Development Workflow - EclipseCon France 2014Modern Web Application Development Workflow - EclipseCon France 2014
Modern Web Application Development Workflow - EclipseCon France 2014
 
Html5 intro
Html5 introHtml5 intro
Html5 intro
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
 
Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)
 
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
 
Front End Development for Back End Developers - Devoxx UK 2017
 Front End Development for Back End Developers - Devoxx UK 2017 Front End Development for Back End Developers - Devoxx UK 2017
Front End Development for Back End Developers - Devoxx UK 2017
 
Profiling PHP with Xdebug / Webgrind
Profiling PHP with Xdebug / WebgrindProfiling PHP with Xdebug / Webgrind
Profiling PHP with Xdebug / Webgrind
 
Familiar HTML5 - äș‹äŸ‹ăšă‚”ăƒłăƒ—ăƒ«ă‚łăƒŒăƒ‰ă‹ă‚‰ć­Šă¶ èș«èż‘ă§æ™źé€šă«äœżă‚ăŠă„ă‚‹HTML5
Familiar HTML5 - äș‹äŸ‹ăšă‚”ăƒłăƒ—ăƒ«ă‚łăƒŒăƒ‰ă‹ă‚‰ć­Šă¶ èș«èż‘ă§æ™źé€šă«äœżă‚ăŠă„ă‚‹HTML5Familiar HTML5 - äș‹äŸ‹ăšă‚”ăƒłăƒ—ăƒ«ă‚łăƒŒăƒ‰ă‹ă‚‰ć­Šă¶ èș«èż‘ă§æ™źé€šă«äœżă‚ăŠă„ă‚‹HTML5
Familiar HTML5 - äș‹äŸ‹ăšă‚”ăƒłăƒ—ăƒ«ă‚łăƒŒăƒ‰ă‹ă‚‰ć­Šă¶ èș«èż‘ă§æ™źé€šă«äœżă‚ăŠă„ă‚‹HTML5
 
Geek Moot '09 -- Smarty 101
Geek Moot '09 -- Smarty 101Geek Moot '09 -- Smarty 101
Geek Moot '09 -- Smarty 101
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Use Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsUse Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile Apps
 
Intro To Django
Intro To DjangoIntro To Django
Intro To Django
 
How to Webpack your Django!
How to Webpack your Django!How to Webpack your Django!
How to Webpack your Django!
 
Introduce Django
Introduce DjangoIntroduce Django
Introduce Django
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
 

KĂŒrzlich hochgeladen

IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 

KĂŒrzlich hochgeladen (20)

IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 

Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp