SlideShare a Scribd company logo

Symfony und Ember.js auf einer Seite #codetalks14

•
•
Paul Seiffert
Paul Seiffert

Internetnutzer sind es heutzutage gewohnt, dass Webseiten unmittelbar auf Interaktion reagieren und ohne häufiges Nachladen funktionieren. Techniken, die solche Webseiten ermöglichen, sollten durch die Zuhilfenahme zuverlässiger Frameworks umgesetzt werden. Serverseitig ist für viele Entwickler Symfony das Mittel der Wahl, im Browser kann es Ember.js sein, das vor allem im Bereich der Single-Page-Applikationen glänzt. Mit beiden zusammen kann also nichts mehr schief gehen, oder? Dieser Vortrag zeigt Symfony und Ember.js in Kombination und wie man umdenken muss, wenn man gewohnt ist, klassische Webseiten zu entwickeln. Speziell geht er auf die dabei auftretenden Herausforderungen im Templating, Routing und bei der Model-Synchronisierung ein.

Software
1 of 52
Download to read offline
Symfony und Ember.js auf einer Seite Paul Seiffert
 SensioLabs Deutschland GmbH
Klassische Webseiten
B R O W S E R GET / URL-Eingabe HTML Webseite Link-Klick Neue
 Webseite … GET /blog HTML S E R V E R Klassische Webseiten
HTML R O U T I N G C O N T R O L L E R S E C U R I T Y T E M P L AT I N G GET / Business
 Logik S Y M F O N Y Klassische Symfony-Seiten
Moderne Webseiten
Moderne Webseiten View-Wechsel B R O W S E R GET / URL-Eingabe HTML Webseite Link-Klick Neue
 Webseite … S E R V E R
Moderne Webseiten B R O W S E R R O U T I N G T E M P L AT I N G C O N T R O L L E R M O D E L
B R O W S E R Moderne Webseiten R O U T I N G T E M P L AT I N G C O N T R O L L E R M O D E L GET
 /api/users JSON S E R V E R
Paul
 Seiffert paul.seiffert@gmail.com
Symfony und Ember.js auf einer Seite Paul Seiffert
 SensioLabs Deutschland GmbH
– FA B I E N P O T E N C I E R “Symfony2 is an HTTP framework;
 it is a Request/Response framework.”
B R O W S E R HTTP + Socket GET /api/… Lokal VM S Y M F O N Y A P P
B R O W S E R GET /api/… Lokal Server S Y M F O N Y A P P W E B S E R V E R GET / D AT E I S Y S T E M
R O U T I N G
Wohin möchte der Benutzer?
posts:
 pattern: /
 methods: GET
 defaults: { _controller: BlogBundle:Post:index }
 
 post:
 pattern: /blog/{slug}
 methods: GET
 defaults: { _controller: BlogBundle:Post:detail } Symfony Routing
#http://example.com blog/first-article/
var Router = Ember.Router.extend({
 location: 'history'
 });
 Router.map(function() {
 this.resource('blog', { path: '/' }, function () {
 this.route('post', { path: '/:slug' });
 });
 this.route('about');
 }); PushState FTW!! Ember.js Routing
server { listen *:80; server_name blog; location / { root /opt/blog/dist; try_files $uri /index.html; index index.html; } } Konfiguration
/api
location / { root /opt/blog/dist; try_files $uri /index.html; index index.html; } / /api/posts /app.php/posts /app.php/api location ~ ^/api { root /opt/blog/web; try_files $uri @rewriteapp; index app.php; } location @rewriteapp { rewrite ^/api/(.*)$ /app.php/$1 last; } location ~ ^/(app|app_dev).php(/|$) { root /opt/blog/api/web; fastcgi_split_path_info /(.+.php)(/.*)$; include /etc/nginx/fastcgi_params; fastcgi_pass 127.0.0.1:9001; }
M O D E L
ember data
var Post = DS.Model.extend({
 title: DS.attr(),
 body: DS.attr(),
 date: DS.attr(),
 slug: DS.attr(),
 comments: DS.hasMany('comment', { async: true }),
 
 teaser: function () {
 return this.get('body').substr(0, 100);
 }.property('body')
 }); m o d e l s / p o s t . j s
S T O R E A D A P T E R J S A P P L I K AT I O N R E S T F U L A P I
store.find('post', { slug: ‘awesome-blog-article‘}) GET /post?slug=awesome-blog-article
{
 "post": [
 {
 "id": 1,
 "title": “Mein erster Blog Post",
 "body": “Das der Inhalt meines ersten Blog-Posts“,
 "date": "2014-10-04T14:23:10+0200",
 "slug": "first-post",
 "links": {
 "comments": "/app_dev.php/api/posts/first-post/comments"
 }
 }
 ]
 } GET /post?slug=awesome-blog-article
/first-post Router.map(function() {
 this.resource('blog', { path: '/' }, function () {
 this.route('post', { path: '/:slug' });
 }); }); ro u t e r. j s
ro u t e r. j s var BlogPostRoute = Ember.Route.extend({
 model: function (params) {
 return this.store.find('post', { slug: params.slug });
 },
 
 serialize: function(model) {
 return { slug: model.get('slug') };
 }
 }); ro u t e s / b l o g / p o s t . j s Router.map(function() {
 this.resource('blog', { path: '/' }, function () {
 this.route('post', { path: '/:slug' });
 }); });
DS.RESTAdapter.extend({
 namespace: ‘app_dev.php/api’ }); a d a p t e r s / a p p l i c a t i o n . j s this.store.find('post') GET /app_dev.php/api/posts this.store.find(‘post’, { slug: ‘first-post’ }) GET /app_dev.php/api/posts?slug=first-post this.store.find(‘post’, 1) GET /app_dev.php/api/posts/1
R E S T F U L A P I C O N T R O L L E R R E P O S I T O RY D ATA B A S E
R E S T F U L A P I jms/serializer willdurand/negotiation symfony/symfony willdurand/hateoas http://www.slideshare.net/seiffertp composer require
ember data
T E M P L AT I N G
<div class="container">
 
 {{render 'navigation'}}
 
 <div class="container-fluid" id="content">
 {{outlet}}
 </div>
 
 </div> a p p l i c a t i o n . h b s
<div class="blog-post">
 <h1>{{#link-to 'blog.post' slug}}{{title}}{{/link-to}}</h1>
 <div class="blog-post-content">
 {{body}}
 </div>
 <div class="blog-post-comments">
 {{#each comments}}
 {{partial 'blog/comment'}}
 {{/each}}
 </div>
 </div>
 
 {{#link-to 'blog.index'}}Zurück zur Liste{{/link-to}} b l o g / p o s t . h b s
var Post = DS.Model.extend({
 title: DS.attr(),
 body: DS.attr(),
 date: DS.attr(),
 slug: DS.attr(),
 comments: DS.hasMany('comment', { async: true }),
 
 teaser: function () {
 return this.get('body').substr(0, 100);
 }.property('body')
 }); m o d e l s / p o s t . j s
<div class="blog-post">
 <h1>{{#link-to 'blog.post' slug}}{{title}}{{/link-to}}</h1>
 <div class="blog-post-content">
 {{body}}
 </div>
 <div class="blog-post-comments">
 {{#each comments}}
 {{partial 'blog/comment'}}
 {{/each}}
 </div>
 </div>
 
 {{#link-to 'blog.index'}}Zurück zur Liste{{/link-to}} b l o g / p o s t . h b s
T O O L S
$ ember serve —-proxy=http://symfony-api:80 version: 0.0.43 Proxying to http://symfony-api:80 Livereload server on port 35729 Serving on http://0.0.0.0:4200 $ npm install -g ember-cli
B R O W S E R HTTP + Socket N G I N X S Y M F O N Y A P P GET /app_dev.php/api/… P H P - F P M D e v e l o p m e n t Lokal Vagrant
 VM
B R O W S E R N G I N X S Y M F O N Y A P P GET /api/… P H P - F P M P ro d u c t i o n GET /
https://github.com/
 seiffert/ember-symfony-blog
D A N K E !
F R A G E N ?

Recommended

How to Use Sass to Make Your Site More Maintainable
How to Use Sass to Make Your Site More MaintainableHow to Use Sass to Make Your Site More Maintainable
How to Use Sass to Make Your Site More Maintainable
Scott Vandehey
 
Gem christmas calendar
Gem christmas calendarGem christmas calendar
Gem christmas calendar
erichsen
 
Ruby on discuz
Ruby on discuzRuby on discuz
Ruby on discuz
Mu-Fan Teng
 
Elasticsearch – mye mer enn søk! [JavaZone 2013]
Elasticsearch – mye mer enn søk! [JavaZone 2013]Elasticsearch – mye mer enn søk! [JavaZone 2013]
Elasticsearch – mye mer enn søk! [JavaZone 2013]
foundsearch
 
Zend Lab
Zend LabZend Lab
Zend Lab
Leo Nguyen
 
Date difference[1]
Date difference[1]Date difference[1]
Date difference[1]
shafiullas
 
e-Pitti fairs got a new life
e-Pitti fairs got a new lifee-Pitti fairs got a new life
e-Pitti fairs got a new life
Fabian Necci
 
Seasion5
Seasion5Seasion5
Seasion5
สอนทำโปรเจคจบ วิทคอมไอทีคอมธุรกิจ
 

Recommended

How to Use Sass to Make Your Site More Maintainable
How to Use Sass to Make Your Site More MaintainableHow to Use Sass to Make Your Site More Maintainable
How to Use Sass to Make Your Site More Maintainable
Scott Vandehey
 
Gem christmas calendar
Gem christmas calendarGem christmas calendar
Gem christmas calendar
erichsen
 
Ruby on discuz
Ruby on discuzRuby on discuz
Ruby on discuz
Mu-Fan Teng
 
Elasticsearch – mye mer enn søk! [JavaZone 2013]
Elasticsearch – mye mer enn søk! [JavaZone 2013]Elasticsearch – mye mer enn søk! [JavaZone 2013]
Elasticsearch – mye mer enn søk! [JavaZone 2013]
foundsearch
 
Zend Lab
Zend LabZend Lab
Zend Lab
Leo Nguyen
 
Date difference[1]
Date difference[1]Date difference[1]
Date difference[1]
shafiullas
 
e-Pitti fairs got a new life
e-Pitti fairs got a new lifee-Pitti fairs got a new life
e-Pitti fairs got a new life
Fabian Necci
 
Seasion5
Seasion5Seasion5
Seasion5
สอนทำโปรเจคจบ วิทคอมไอทีคอมธุรกิจ
 
Reno-Tahoe WordCamp 2011 - WordPress End User Security - Dre Armeda
Reno-Tahoe WordCamp 2011 - WordPress End User Security - Dre ArmedaReno-Tahoe WordCamp 2011 - WordPress End User Security - Dre Armeda
Reno-Tahoe WordCamp 2011 - WordPress End User Security - Dre Armeda
Dre Armeda
 
The Basics Of Page Creation
The Basics Of Page CreationThe Basics Of Page Creation
The Basics Of Page Creation
Wildan Maulana
 
Writing Apps the Google-y Way
Writing Apps the Google-y WayWriting Apps the Google-y Way
Writing Apps the Google-y Way
Pamela Fox
 
Adding commentary to essays my notes
Adding commentary to essays my notesAdding commentary to essays my notes
Adding commentary to essays my notes
Wendy Scruggs
 
Simple Blue Blog Template XML 的副本
Simple Blue Blog Template XML 的副本Simple Blue Blog Template XML 的副本
Simple Blue Blog Template XML 的副本
a5494535
 
REST in practice with Symfony2
REST in practice with Symfony2REST in practice with Symfony2
REST in practice with Symfony2
Daniel Londero
 
Sympal A Cmf Based On Symfony
Sympal A Cmf Based On SymfonySympal A Cmf Based On Symfony
Sympal A Cmf Based On Symfony
Jonathan Wage
 
Symfony in the Cloud
Symfony in the CloudSymfony in the Cloud
Symfony in the Cloud
Kris Wallsmith
 
міський проект «щаслива лапка»
міський проект «щаслива лапка»міський проект «щаслива лапка»
міський проект «щаслива лапка»
Natalia Skovorodkina
 
Drupal8 for Symfony Developers
Drupal8 for Symfony DevelopersDrupal8 for Symfony Developers
Drupal8 for Symfony Developers
Antonio Peric-Mazar
 
Like Ruby on Rails for Node - the Sails js framework
Like Ruby on Rails for Node - the Sails js frameworkLike Ruby on Rails for Node - the Sails js framework
Like Ruby on Rails for Node - the Sails js framework
Stenio Ferreira
 
Matters of State
Matters of StateMatters of State
Matters of State
Kris Wallsmith
 
[Js hcm] Deploying node.js with Forever.js and nginx
[Js hcm] Deploying node.js with Forever.js and nginx[Js hcm] Deploying node.js with Forever.js and nginx
[Js hcm] Deploying node.js with Forever.js and nginx
Nicolas Embleton
 
Tomáš Votruba - Hot news! PHP 7.0, 7.1 a Symfony 3.1, 3.2 a 3.3
Tomáš Votruba - Hot news! PHP 7.0, 7.1 a Symfony 3.1, 3.2 a 3.3Tomáš Votruba - Hot news! PHP 7.0, 7.1 a Symfony 3.1, 3.2 a 3.3
Tomáš Votruba - Hot news! PHP 7.0, 7.1 a Symfony 3.1, 3.2 a 3.3
Tomáš Votruba
 
Integrating React.js with PHP projects
Integrating React.js with PHP projectsIntegrating React.js with PHP projects
Integrating React.js with PHP projects
Ignacio Martín
 
Debugging Effectively - PHP UK 2017
Debugging Effectively - PHP UK 2017Debugging Effectively - PHP UK 2017
Debugging Effectively - PHP UK 2017
Colin O'Dell
 
Serverless Architecture
Serverless ArchitectureServerless Architecture
Serverless Architecture
Michał Kurzeja
 
New Symfony Tips & Tricks (SymfonyCon Paris 2015)
New Symfony Tips & Tricks (SymfonyCon Paris 2015)New Symfony Tips & Tricks (SymfonyCon Paris 2015)
New Symfony Tips & Tricks (SymfonyCon Paris 2015)
Javier Eguiluz
 
Docker workshop
Docker workshopDocker workshop
Docker workshop
Michał Kurzeja
 
Unleash your Symfony projects with eZ Platform
Unleash your Symfony projects with eZ PlatformUnleash your Symfony projects with eZ Platform
Unleash your Symfony projects with eZ Platform
Sébastien Morel
 
PHP 7.x - past, present, future
PHP 7.x - past, present, futurePHP 7.x - past, present, future
PHP 7.x - past, present, future
Boyan Yordanov
 
Building Single Page Application (SPA) with Symfony2 and AngularJS
Building Single Page Application (SPA) with Symfony2 and AngularJSBuilding Single Page Application (SPA) with Symfony2 and AngularJS
Building Single Page Application (SPA) with Symfony2 and AngularJS
Antonio Peric-Mazar
 

More Related Content

What's hot

Reno-Tahoe WordCamp 2011 - WordPress End User Security - Dre Armeda
Reno-Tahoe WordCamp 2011 - WordPress End User Security - Dre ArmedaReno-Tahoe WordCamp 2011 - WordPress End User Security - Dre Armeda
Reno-Tahoe WordCamp 2011 - WordPress End User Security - Dre Armeda
Dre Armeda
 
The Basics Of Page Creation
The Basics Of Page CreationThe Basics Of Page Creation
The Basics Of Page Creation
Wildan Maulana
 
Writing Apps the Google-y Way
Writing Apps the Google-y WayWriting Apps the Google-y Way
Writing Apps the Google-y Way
Pamela Fox
 
Adding commentary to essays my notes
Adding commentary to essays my notesAdding commentary to essays my notes
Adding commentary to essays my notes
Wendy Scruggs
 
Simple Blue Blog Template XML 的副本
Simple Blue Blog Template XML 的副本Simple Blue Blog Template XML 的副本
Simple Blue Blog Template XML 的副本
a5494535
 
REST in practice with Symfony2
REST in practice with Symfony2REST in practice with Symfony2
REST in practice with Symfony2
Daniel Londero
 

What's hot (6)

Reno-Tahoe WordCamp 2011 - WordPress End User Security - Dre Armeda
Reno-Tahoe WordCamp 2011 - WordPress End User Security - Dre ArmedaReno-Tahoe WordCamp 2011 - WordPress End User Security - Dre Armeda
Reno-Tahoe WordCamp 2011 - WordPress End User Security - Dre Armeda
 
The Basics Of Page Creation
The Basics Of Page CreationThe Basics Of Page Creation
The Basics Of Page Creation
 
Writing Apps the Google-y Way
Writing Apps the Google-y WayWriting Apps the Google-y Way
Writing Apps the Google-y Way
 
Adding commentary to essays my notes
Adding commentary to essays my notesAdding commentary to essays my notes
Adding commentary to essays my notes
 
Simple Blue Blog Template XML 的副本
Simple Blue Blog Template XML 的副本Simple Blue Blog Template XML 的副本
Simple Blue Blog Template XML 的副本
 
REST in practice with Symfony2
REST in practice with Symfony2REST in practice with Symfony2
REST in practice with Symfony2
 

Viewers also liked

Sympal A Cmf Based On Symfony
Sympal A Cmf Based On SymfonySympal A Cmf Based On Symfony
Sympal A Cmf Based On Symfony
Jonathan Wage
 
Symfony in the Cloud
Symfony in the CloudSymfony in the Cloud
Symfony in the Cloud
Kris Wallsmith
 
міський проект «щаслива лапка»
міський проект «щаслива лапка»міський проект «щаслива лапка»
міський проект «щаслива лапка»
Natalia Skovorodkina
 
Drupal8 for Symfony Developers
Drupal8 for Symfony DevelopersDrupal8 for Symfony Developers
Drupal8 for Symfony Developers
Antonio Peric-Mazar
 
Like Ruby on Rails for Node - the Sails js framework
Like Ruby on Rails for Node - the Sails js frameworkLike Ruby on Rails for Node - the Sails js framework
Like Ruby on Rails for Node - the Sails js framework
Stenio Ferreira
 
Matters of State
Matters of StateMatters of State
Matters of State
Kris Wallsmith
 
[Js hcm] Deploying node.js with Forever.js and nginx
[Js hcm] Deploying node.js with Forever.js and nginx[Js hcm] Deploying node.js with Forever.js and nginx
[Js hcm] Deploying node.js with Forever.js and nginx
Nicolas Embleton
 
Tomáš Votruba - Hot news! PHP 7.0, 7.1 a Symfony 3.1, 3.2 a 3.3
Tomáš Votruba - Hot news! PHP 7.0, 7.1 a Symfony 3.1, 3.2 a 3.3Tomáš Votruba - Hot news! PHP 7.0, 7.1 a Symfony 3.1, 3.2 a 3.3
Tomáš Votruba - Hot news! PHP 7.0, 7.1 a Symfony 3.1, 3.2 a 3.3
Tomáš Votruba
 
Integrating React.js with PHP projects
Integrating React.js with PHP projectsIntegrating React.js with PHP projects
Integrating React.js with PHP projects
Ignacio Martín
 
Debugging Effectively - PHP UK 2017
Debugging Effectively - PHP UK 2017Debugging Effectively - PHP UK 2017
Debugging Effectively - PHP UK 2017
Colin O'Dell
 
Serverless Architecture
Serverless ArchitectureServerless Architecture
Serverless Architecture
Michał Kurzeja
 
New Symfony Tips & Tricks (SymfonyCon Paris 2015)
New Symfony Tips & Tricks (SymfonyCon Paris 2015)New Symfony Tips & Tricks (SymfonyCon Paris 2015)
New Symfony Tips & Tricks (SymfonyCon Paris 2015)
Javier Eguiluz
 
Docker workshop
Docker workshopDocker workshop
Docker workshop
Michał Kurzeja
 
Unleash your Symfony projects with eZ Platform
Unleash your Symfony projects with eZ PlatformUnleash your Symfony projects with eZ Platform
Unleash your Symfony projects with eZ Platform
Sébastien Morel
 
PHP 7.x - past, present, future
PHP 7.x - past, present, futurePHP 7.x - past, present, future
PHP 7.x - past, present, future
Boyan Yordanov
 

Viewers also liked (15)

Sympal A Cmf Based On Symfony
Sympal A Cmf Based On SymfonySympal A Cmf Based On Symfony
Sympal A Cmf Based On Symfony
 
Symfony in the Cloud
Symfony in the CloudSymfony in the Cloud
Symfony in the Cloud
 
міський проект «щаслива лапка»
міський проект «щаслива лапка»міський проект «щаслива лапка»
міський проект «щаслива лапка»
 
Drupal8 for Symfony Developers
Drupal8 for Symfony DevelopersDrupal8 for Symfony Developers
Drupal8 for Symfony Developers
 
Like Ruby on Rails for Node - the Sails js framework
Like Ruby on Rails for Node - the Sails js frameworkLike Ruby on Rails for Node - the Sails js framework
Like Ruby on Rails for Node - the Sails js framework
 
Matters of State
Matters of StateMatters of State
Matters of State
 
[Js hcm] Deploying node.js with Forever.js and nginx
[Js hcm] Deploying node.js with Forever.js and nginx[Js hcm] Deploying node.js with Forever.js and nginx
[Js hcm] Deploying node.js with Forever.js and nginx
 
Tomáš Votruba - Hot news! PHP 7.0, 7.1 a Symfony 3.1, 3.2 a 3.3
Tomáš Votruba - Hot news! PHP 7.0, 7.1 a Symfony 3.1, 3.2 a 3.3Tomáš Votruba - Hot news! PHP 7.0, 7.1 a Symfony 3.1, 3.2 a 3.3
Tomáš Votruba - Hot news! PHP 7.0, 7.1 a Symfony 3.1, 3.2 a 3.3
 
Integrating React.js with PHP projects
Integrating React.js with PHP projectsIntegrating React.js with PHP projects
Integrating React.js with PHP projects
 
Debugging Effectively - PHP UK 2017
Debugging Effectively - PHP UK 2017Debugging Effectively - PHP UK 2017
Debugging Effectively - PHP UK 2017
 
Serverless Architecture
Serverless ArchitectureServerless Architecture
Serverless Architecture
 
New Symfony Tips & Tricks (SymfonyCon Paris 2015)
New Symfony Tips & Tricks (SymfonyCon Paris 2015)New Symfony Tips & Tricks (SymfonyCon Paris 2015)
New Symfony Tips & Tricks (SymfonyCon Paris 2015)
 
Docker workshop
Docker workshopDocker workshop
Docker workshop
 
Unleash your Symfony projects with eZ Platform
Unleash your Symfony projects with eZ PlatformUnleash your Symfony projects with eZ Platform
Unleash your Symfony projects with eZ Platform
 
PHP 7.x - past, present, future
PHP 7.x - past, present, futurePHP 7.x - past, present, future
PHP 7.x - past, present, future
 

Similar to Symfony und Ember.js auf einer Seite #codetalks14

Building Single Page Application (SPA) with Symfony2 and AngularJS
Building Single Page Application (SPA) with Symfony2 and AngularJSBuilding Single Page Application (SPA) with Symfony2 and AngularJS
Building Single Page Application (SPA) with Symfony2 and AngularJS
Antonio Peric-Mazar
 
Django
DjangoDjango
Django
webuploader
 
Great Developers Steal
Great Developers StealGreat Developers Steal
Great Developers Steal
Ben Scofield
 
Spring Surf 101
Spring Surf 101Spring Surf 101
Spring Surf 101
Alfresco Software
 
JSON and the APInauts
JSON and the APInautsJSON and the APInauts
JSON and the APInauts
Wynn Netherland
 
Pyramid Lighter/Faster/Better web apps
Pyramid Lighter/Faster/Better web appsPyramid Lighter/Faster/Better web apps
Pyramid Lighter/Faster/Better web apps
Dylan Jay
 
Kicking off with Zend Expressive and Doctrine ORM (PHP UK 2017)
Kicking off with Zend Expressive and Doctrine ORM (PHP UK 2017)Kicking off with Zend Expressive and Doctrine ORM (PHP UK 2017)
Kicking off with Zend Expressive and Doctrine ORM (PHP UK 2017)
James Titcumb
 
Mojolicious. Веб в коробке!
Mojolicious. Веб в коробке!Mojolicious. Веб в коробке!
Mojolicious. Веб в коробке!
Anatoly Sharifulin
 
PHP and MySQL PHP Written as a set of CGI binaries in C in ...
PHP and MySQL PHP Written as a set of CGI binaries in C in ...PHP and MySQL PHP Written as a set of CGI binaries in C in ...
PHP and MySQL PHP Written as a set of CGI binaries in C in ...webhostingguy
 
Introduction to Alfresco Surf Platform
Introduction to Alfresco Surf PlatformIntroduction to Alfresco Surf Platform
Introduction to Alfresco Surf Platform
Alfresco Software
 
Spyware/Malware FVCP
Spyware/Malware FVCPSpyware/Malware FVCP
Spyware/Malware FVCP
Pete DuMelle
 
August 10th, 2009 Pete De Mulle Twitter
August 10th, 2009 Pete De Mulle TwitterAugust 10th, 2009 Pete De Mulle Twitter
August 10th, 2009 Pete De Mulle Twitter
Straight North
 
FVCP - Facebook , Twitter and Meetup API / Widgets
FVCP - Facebook , Twitter and Meetup API / WidgetsFVCP - Facebook , Twitter and Meetup API / Widgets
FVCP - Facebook , Twitter and Meetup API / Widgets
Pete DuMelle
 
Using the new WordPress REST API
Using the new WordPress REST APIUsing the new WordPress REST API
Using the new WordPress REST API
Caldera Labs
 
Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)
Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)
Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)
James Titcumb
 
Repaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares webRepaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares web
Pablo Garaizar
 
Nodejs.meetup
Nodejs.meetupNodejs.meetup
Nodejs.meetup
Vivian S. Zhang
 
Hanoi php day 2008 - 05. nguyen hai nhat huy - building-restful-web-service-w...
Hanoi php day 2008 - 05. nguyen hai nhat huy - building-restful-web-service-w...Hanoi php day 2008 - 05. nguyen hai nhat huy - building-restful-web-service-w...
Hanoi php day 2008 - 05. nguyen hai nhat huy - building-restful-web-service-w...
Nguyen Duc Phu
 
Using WordPress as your application stack
Using WordPress as your application stackUsing WordPress as your application stack
Using WordPress as your application stack
Paul Bearne
 
Symfony2 and AngularJS
Symfony2 and AngularJSSymfony2 and AngularJS
Symfony2 and AngularJS
Antonio Peric-Mazar
 

Similar to Symfony und Ember.js auf einer Seite #codetalks14 (20)

Building Single Page Application (SPA) with Symfony2 and AngularJS
Building Single Page Application (SPA) with Symfony2 and AngularJSBuilding Single Page Application (SPA) with Symfony2 and AngularJS
Building Single Page Application (SPA) with Symfony2 and AngularJS
 
Django
DjangoDjango
Django
 
Great Developers Steal
Great Developers StealGreat Developers Steal
Great Developers Steal
 
Spring Surf 101
Spring Surf 101Spring Surf 101
Spring Surf 101
 
JSON and the APInauts
JSON and the APInautsJSON and the APInauts
JSON and the APInauts
 
Pyramid Lighter/Faster/Better web apps
Pyramid Lighter/Faster/Better web appsPyramid Lighter/Faster/Better web apps
Pyramid Lighter/Faster/Better web apps
 
Kicking off with Zend Expressive and Doctrine ORM (PHP UK 2017)
Kicking off with Zend Expressive and Doctrine ORM (PHP UK 2017)Kicking off with Zend Expressive and Doctrine ORM (PHP UK 2017)
Kicking off with Zend Expressive and Doctrine ORM (PHP UK 2017)
 
Mojolicious. Веб в коробке!
Mojolicious. Веб в коробке!Mojolicious. Веб в коробке!
Mojolicious. Веб в коробке!
 
PHP and MySQL PHP Written as a set of CGI binaries in C in ...
PHP and MySQL PHP Written as a set of CGI binaries in C in ...PHP and MySQL PHP Written as a set of CGI binaries in C in ...
PHP and MySQL PHP Written as a set of CGI binaries in C in ...
 
Introduction to Alfresco Surf Platform
Introduction to Alfresco Surf PlatformIntroduction to Alfresco Surf Platform
Introduction to Alfresco Surf Platform
 
Spyware/Malware FVCP
Spyware/Malware FVCPSpyware/Malware FVCP
Spyware/Malware FVCP
 
August 10th, 2009 Pete De Mulle Twitter
August 10th, 2009 Pete De Mulle TwitterAugust 10th, 2009 Pete De Mulle Twitter
August 10th, 2009 Pete De Mulle Twitter
 
FVCP - Facebook , Twitter and Meetup API / Widgets
FVCP - Facebook , Twitter and Meetup API / WidgetsFVCP - Facebook , Twitter and Meetup API / Widgets
FVCP - Facebook , Twitter and Meetup API / Widgets
 
Using the new WordPress REST API
Using the new WordPress REST APIUsing the new WordPress REST API
Using the new WordPress REST API
 
Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)
Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)
Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)
 
Repaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares webRepaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares web
 
Nodejs.meetup
Nodejs.meetupNodejs.meetup
Nodejs.meetup
 
Hanoi php day 2008 - 05. nguyen hai nhat huy - building-restful-web-service-w...
Hanoi php day 2008 - 05. nguyen hai nhat huy - building-restful-web-service-w...Hanoi php day 2008 - 05. nguyen hai nhat huy - building-restful-web-service-w...
Hanoi php day 2008 - 05. nguyen hai nhat huy - building-restful-web-service-w...
 
Using WordPress as your application stack
Using WordPress as your application stackUsing WordPress as your application stack
Using WordPress as your application stack
 
Symfony2 and AngularJS
Symfony2 and AngularJSSymfony2 and AngularJS
Symfony2 and AngularJS
 

Recently uploaded

Microservice Teams - How the cloud changes the way we work
Microservice Teams - How the cloud changes the way we workMicroservice Teams - How the cloud changes the way we work
Microservice Teams - How the cloud changes the way we work
Sven Peters
 
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
Bert Jan Schrijver
 
Fundamentals of Programming and Language Processors
Fundamentals of Programming and Language ProcessorsFundamentals of Programming and Language Processors
Fundamentals of Programming and Language Processors
Rakesh Kumar R
 
Lecture 2 - software testing SE 412.pptx
Lecture 2 - software testing SE 412.pptxLecture 2 - software testing SE 412.pptx
Lecture 2 - software testing SE 412.pptx
TaghreedAltamimi
 
Oracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptxOracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptx
Remote DBA Services
 
Using Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query PerformanceUsing Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query Performance
Grant Fritchey
 
Hand Rolled Applicative User Validation Code Kata
Hand Rolled Applicative User Validation Code KataHand Rolled Applicative User Validation Code Kata
Hand Rolled Applicative User Validation Code Kata
Philip Schwarz
 
Mobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona InfotechMobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona Infotech
Drona Infotech
 
Preparing Non - Technical Founders for Engaging a Tech Agency
Preparing Non - Technical Founders for Engaging a Tech AgencyPreparing Non - Technical Founders for Engaging a Tech Agency
Preparing Non - Technical Founders for Engaging a Tech Agency
ISH Technologies
 
fiscal year variant fiscal year variant.
fiscal year variant fiscal year variant.fiscal year variant fiscal year variant.
fiscal year variant fiscal year variant.
AnkitaPandya11
 
Modelling Up - DDDEurope 2024 - Amsterdam
Modelling Up - DDDEurope 2024 - AmsterdamModelling Up - DDDEurope 2024 - Amsterdam
Modelling Up - DDDEurope 2024 - Amsterdam
Alberto Brandolini
 
What next after learning python programming basics
What next after learning python programming basicsWhat next after learning python programming basics
What next after learning python programming basics
Rakesh Kumar R
 
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian CompaniesE-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
Quickdice ERP
 
Enums On Steroids - let's look at sealed classes !
Enums On Steroids - let's look at sealed classes !Enums On Steroids - let's look at sealed classes !
Enums On Steroids - let's look at sealed classes !
Marcin Chrost
 
Oracle 23c New Features For DBAs and Developers.pptx
Oracle 23c New Features For DBAs and Developers.pptxOracle 23c New Features For DBAs and Developers.pptx
Oracle 23c New Features For DBAs and Developers.pptx
Remote DBA Services
 
Webinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for EmbeddedWebinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for Embedded
ICS
 
Artificia Intellicence and XPath Extension Functions
Artificia Intellicence and XPath Extension FunctionsArtificia Intellicence and XPath Extension Functions
Artificia Intellicence and XPath Extension Functions
Octavian Nadolu
 
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling ExtensionsUI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
Peter Muessig
 
Project Management: The Role of Project Dashboards.pdf
Project Management: The Role of Project Dashboards.pdfProject Management: The Role of Project Dashboards.pdf
Project Management: The Role of Project Dashboards.pdf
Karya Keeper
 
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, FactsALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
Green Software Development
 

Recently uploaded (20)

Microservice Teams - How the cloud changes the way we work
Microservice Teams - How the cloud changes the way we workMicroservice Teams - How the cloud changes the way we work
Microservice Teams - How the cloud changes the way we work
 
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
 
Fundamentals of Programming and Language Processors
Fundamentals of Programming and Language ProcessorsFundamentals of Programming and Language Processors
Fundamentals of Programming and Language Processors
 
Lecture 2 - software testing SE 412.pptx
Lecture 2 - software testing SE 412.pptxLecture 2 - software testing SE 412.pptx
Lecture 2 - software testing SE 412.pptx
 
Oracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptxOracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptx
 
Using Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query PerformanceUsing Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query Performance
 
Hand Rolled Applicative User Validation Code Kata
Hand Rolled Applicative User Validation Code KataHand Rolled Applicative User Validation Code Kata
Hand Rolled Applicative User Validation Code Kata
 
Mobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona InfotechMobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona Infotech
 
Preparing Non - Technical Founders for Engaging a Tech Agency
Preparing Non - Technical Founders for Engaging a Tech AgencyPreparing Non - Technical Founders for Engaging a Tech Agency
Preparing Non - Technical Founders for Engaging a Tech Agency
 
fiscal year variant fiscal year variant.
fiscal year variant fiscal year variant.fiscal year variant fiscal year variant.
fiscal year variant fiscal year variant.
 
Modelling Up - DDDEurope 2024 - Amsterdam
Modelling Up - DDDEurope 2024 - AmsterdamModelling Up - DDDEurope 2024 - Amsterdam
Modelling Up - DDDEurope 2024 - Amsterdam
 
What next after learning python programming basics
What next after learning python programming basicsWhat next after learning python programming basics
What next after learning python programming basics
 
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian CompaniesE-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
 
Enums On Steroids - let's look at sealed classes !
Enums On Steroids - let's look at sealed classes !Enums On Steroids - let's look at sealed classes !
Enums On Steroids - let's look at sealed classes !
 
Oracle 23c New Features For DBAs and Developers.pptx
Oracle 23c New Features For DBAs and Developers.pptxOracle 23c New Features For DBAs and Developers.pptx
Oracle 23c New Features For DBAs and Developers.pptx
 
Webinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for EmbeddedWebinar On-Demand: Using Flutter for Embedded
Webinar On-Demand: Using Flutter for Embedded
 
Artificia Intellicence and XPath Extension Functions
Artificia Intellicence and XPath Extension FunctionsArtificia Intellicence and XPath Extension Functions
Artificia Intellicence and XPath Extension Functions
 
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling ExtensionsUI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
 
Project Management: The Role of Project Dashboards.pdf
Project Management: The Role of Project Dashboards.pdfProject Management: The Role of Project Dashboards.pdf
Project Management: The Role of Project Dashboards.pdf
 
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, FactsALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
 

Symfony und Ember.js auf einer Seite #codetalks14

  • 1. Symfony und Ember.js auf einer Seite Paul Seiffert
 SensioLabs Deutschland GmbH
  • 3. B R O W S E R GET / URL-Eingabe HTML Webseite Link-Klick Neue
 Webseite … GET /blog HTML S E R V E R Klassische Webseiten
  • 4. HTML R O U T I N G C O N T R O L L E R S E C U R I T Y T E M P L AT I N G GET / Business
 Logik S Y M F O N Y Klassische Symfony-Seiten
  • 6. Moderne Webseiten View-Wechsel B R O W S E R GET / URL-Eingabe HTML Webseite Link-Klick Neue
 Webseite … S E R V E R
  • 7. Moderne Webseiten B R O W S E R R O U T I N G T E M P L AT I N G C O N T R O L L E R M O D E L
  • 8. B R O W S E R Moderne Webseiten R O U T I N G T E M P L AT I N G C O N T R O L L E R M O D E L GET
 /api/users JSON S E R V E R
  • 10. Symfony und Ember.js auf einer Seite Paul Seiffert
 SensioLabs Deutschland GmbH
  • 11. – FA B I E N P O T E N C I E R “Symfony2 is an HTTP framework;
 it is a Request/Response framework.”
  • 12. B R O W S E R HTTP + Socket GET /api/… Lokal VM S Y M F O N Y A P P
  • 13. B R O W S E R GET /api/… Lokal Server S Y M F O N Y A P P W E B S E R V E R GET / D AT E I S Y S T E M
  • 14. R O U T I N G
  • 15. Wohin möchte der Benutzer?
  • 16. posts:
 pattern: /
 methods: GET
 defaults: { _controller: BlogBundle:Post:index }
 
 post:
 pattern: /blog/{slug}
 methods: GET
 defaults: { _controller: BlogBundle:Post:detail } Symfony Routing
  • 18. var Router = Ember.Router.extend({
 location: 'history'
 });
 Router.map(function() {
 this.resource('blog', { path: '/' }, function () {
 this.route('post', { path: '/:slug' });
 });
 this.route('about');
 }); PushState FTW!! Ember.js Routing
  • 19.
  • 20. server { listen *:80; server_name blog; location / { root /opt/blog/dist; try_files $uri /index.html; index index.html; } } Konfiguration
  • 21. /api
  • 22. location / { root /opt/blog/dist; try_files $uri /index.html; index index.html; } / /api/posts /app.php/posts /app.php/api location ~ ^/api { root /opt/blog/web; try_files $uri @rewriteapp; index app.php; } location @rewriteapp { rewrite ^/api/(.*)$ /app.php/$1 last; } location ~ ^/(app|app_dev).php(/|$) { root /opt/blog/api/web; fastcgi_split_path_info /(.+.php)(/.*)$; include /etc/nginx/fastcgi_params; fastcgi_pass 127.0.0.1:9001; }
  • 23. M O D E L
  • 25. var Post = DS.Model.extend({
 title: DS.attr(),
 body: DS.attr(),
 date: DS.attr(),
 slug: DS.attr(),
 comments: DS.hasMany('comment', { async: true }),
 
 teaser: function () {
 return this.get('body').substr(0, 100);
 }.property('body')
 }); m o d e l s / p o s t . j s
  • 26. S T O R E A D A P T E R J S A P P L I K AT I O N R E S T F U L A P I
  • 27. store.find('post', { slug: ‘awesome-blog-article‘}) GET /post?slug=awesome-blog-article
  • 28. {
 "post": [
 {
 "id": 1,
 "title": “Mein erster Blog Post",
 "body": “Das der Inhalt meines ersten Blog-Posts“,
 "date": "2014-10-04T14:23:10+0200",
 "slug": "first-post",
 "links": {
 "comments": "/app_dev.php/api/posts/first-post/comments"
 }
 }
 ]
 } GET /post?slug=awesome-blog-article
  • 29. /first-post Router.map(function() {
 this.resource('blog', { path: '/' }, function () {
 this.route('post', { path: '/:slug' });
 }); }); ro u t e r. j s
  • 30. ro u t e r. j s var BlogPostRoute = Ember.Route.extend({
 model: function (params) {
 return this.store.find('post', { slug: params.slug });
 },
 
 serialize: function(model) {
 return { slug: model.get('slug') };
 }
 }); ro u t e s / b l o g / p o s t . j s Router.map(function() {
 this.resource('blog', { path: '/' }, function () {
 this.route('post', { path: '/:slug' });
 }); });
  • 31. DS.RESTAdapter.extend({
 namespace: ‘app_dev.php/api’ }); a d a p t e r s / a p p l i c a t i o n . j s this.store.find('post') GET /app_dev.php/api/posts this.store.find(‘post’, { slug: ‘first-post’ }) GET /app_dev.php/api/posts?slug=first-post this.store.find(‘post’, 1) GET /app_dev.php/api/posts/1
  • 32. R E S T F U L A P I C O N T R O L L E R R E P O S I T O RY D ATA B A S E
  • 33. R E S T F U L A P I jms/serializer willdurand/negotiation symfony/symfony willdurand/hateoas http://www.slideshare.net/seiffertp composer require
  • 35.
  • 36.
  • 37. T E M P L AT I N G
  • 38.
  • 39. <div class="container">
 
 {{render 'navigation'}}
 
 <div class="container-fluid" id="content">
 {{outlet}}
 </div>
 
 </div> a p p l i c a t i o n . h b s
  • 40. <div class="blog-post">
 <h1>{{#link-to 'blog.post' slug}}{{title}}{{/link-to}}</h1>
 <div class="blog-post-content">
 {{body}}
 </div>
 <div class="blog-post-comments">
 {{#each comments}}
 {{partial 'blog/comment'}}
 {{/each}}
 </div>
 </div>
 
 {{#link-to 'blog.index'}}Zurück zur Liste{{/link-to}} b l o g / p o s t . h b s
  • 41. var Post = DS.Model.extend({
 title: DS.attr(),
 body: DS.attr(),
 date: DS.attr(),
 slug: DS.attr(),
 comments: DS.hasMany('comment', { async: true }),
 
 teaser: function () {
 return this.get('body').substr(0, 100);
 }.property('body')
 }); m o d e l s / p o s t . j s
  • 42. <div class="blog-post">
 <h1>{{#link-to 'blog.post' slug}}{{title}}{{/link-to}}</h1>
 <div class="blog-post-content">
 {{body}}
 </div>
 <div class="blog-post-comments">
 {{#each comments}}
 {{partial 'blog/comment'}}
 {{/each}}
 </div>
 </div>
 
 {{#link-to 'blog.index'}}Zurück zur Liste{{/link-to}} b l o g / p o s t . h b s
  • 43. T O O L S
  • 44.
  • 45. $ ember serve —-proxy=http://symfony-api:80 version: 0.0.43 Proxying to http://symfony-api:80 Livereload server on port 35729 Serving on http://0.0.0.0:4200 $ npm install -g ember-cli
  • 46.
  • 47.
  • 48. B R O W S E R HTTP + Socket N G I N X S Y M F O N Y A P P GET /app_dev.php/api/… P H P - F P M D e v e l o p m e n t Lokal Vagrant
 VM
  • 49. B R O W S E R N G I N X S Y M F O N Y A P P GET /api/… P H P - F P M P ro d u c t i o n GET /
  • 51. D A N K E !
  • 52. F R A G E N ?