SlideShare ist ein Scribd-Unternehmen 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 von 52
Downloaden Sie, um offline zu lesen
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 ?

Empfohlen

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 MaintainableScott Vandehey
 
Gem christmas calendar
Gem christmas calendarGem christmas calendar
Gem christmas calendarerichsen
 
Ruby on discuz
Ruby on discuzRuby on discuz
Ruby on discuzMu-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 LabLeo 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 lifeFabian Necci
 
Seasion5
Seasion5Seasion5
Seasion5สอนทำโปรเจคจบ วิทคอมไอทีคอมธุรกิจ
 

Empfohlen

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 MaintainableScott Vandehey
 
Gem christmas calendar
Gem christmas calendarGem christmas calendar
Gem christmas calendarerichsen
 
Ruby on discuz
Ruby on discuzRuby on discuz
Ruby on discuzMu-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 LabLeo 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 lifeFabian 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 ArmedaDre Armeda
 
The Basics Of Page Creation
The Basics Of Page CreationThe Basics Of Page Creation
The Basics Of Page CreationWildan Maulana
 
Writing Apps the Google-y Way
Writing Apps the Google-y WayWriting Apps the Google-y Way
Writing Apps the Google-y WayPamela Fox
 
Adding commentary to essays my notes
Adding commentary to essays my notesAdding commentary to essays my notes
Adding commentary to essays my notesWendy 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 Symfony2Daniel Londero
 
Sympal A Cmf Based On Symfony
Sympal A Cmf Based On SymfonySympal A Cmf Based On Symfony
Sympal A Cmf Based On SymfonyJonathan Wage
 
Symfony in the Cloud
Symfony in the CloudSymfony in the Cloud
Symfony in the CloudKris Wallsmith
 
міський проект «щаслива лапка»
міський проект «щаслива лапка»міський проект «щаслива лапка»
міський проект «щаслива лапка»Natalia Skovorodkina
 
Drupal8 for Symfony Developers
Drupal8 for Symfony DevelopersDrupal8 for Symfony Developers
Drupal8 for Symfony DevelopersAntonio 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 frameworkStenio Ferreira
 
Matters of State
Matters of StateMatters of State
Matters of StateKris 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 nginxNicolas 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.3Tomáš Votruba
 
Integrating React.js with PHP projects
Integrating React.js with PHP projectsIntegrating React.js with PHP projects
Integrating React.js with PHP projectsIgnacio Martín
 
Debugging Effectively - PHP UK 2017
Debugging Effectively - PHP UK 2017Debugging Effectively - PHP UK 2017
Debugging Effectively - PHP UK 2017Colin O'Dell
 
Serverless Architecture
Serverless ArchitectureServerless Architecture
Serverless ArchitectureMichał 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 workshopMichał 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 PlatformSébastien Morel
 
PHP 7.x - past, present, future
PHP 7.x - past, present, futurePHP 7.x - past, present, future
PHP 7.x - past, present, futureBoyan 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 AngularJSAntonio Peric-Mazar
 

Weitere ähnliche Inhalte

Was ist angesagt?

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 ArmedaDre Armeda
 
The Basics Of Page Creation
The Basics Of Page CreationThe Basics Of Page Creation
The Basics Of Page CreationWildan Maulana
 
Writing Apps the Google-y Way
Writing Apps the Google-y WayWriting Apps the Google-y Way
Writing Apps the Google-y WayPamela Fox
 
Adding commentary to essays my notes
Adding commentary to essays my notesAdding commentary to essays my notes
Adding commentary to essays my notesWendy 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 Symfony2Daniel Londero
 

Was ist angesagt? (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
 

Andere mochten auch

Sympal A Cmf Based On Symfony
Sympal A Cmf Based On SymfonySympal A Cmf Based On Symfony
Sympal A Cmf Based On SymfonyJonathan Wage
 
міський проект «щаслива лапка»
міський проект «щаслива лапка»міський проект «щаслива лапка»
міський проект «щаслива лапка»Natalia Skovorodkina
 
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 frameworkStenio Ferreira
 
[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 nginxNicolas 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.3Tomáš Votruba
 
Integrating React.js with PHP projects
Integrating React.js with PHP projectsIntegrating React.js with PHP projects
Integrating React.js with PHP projectsIgnacio Martín
 
Debugging Effectively - PHP UK 2017
Debugging Effectively - PHP UK 2017Debugging Effectively - PHP UK 2017
Debugging Effectively - PHP UK 2017Colin O'Dell
 
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
 
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 PlatformSébastien Morel
 
PHP 7.x - past, present, future
PHP 7.x - past, present, futurePHP 7.x - past, present, future
PHP 7.x - past, present, futureBoyan Yordanov
 

Andere mochten auch (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
 

Ähnlich wie 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 AngularJSAntonio Peric-Mazar
 
Great Developers Steal
Great Developers StealGreat Developers Steal
Great Developers StealBen Scofield
 
Pyramid Lighter/Faster/Better web apps
Pyramid Lighter/Faster/Better web appsPyramid Lighter/Faster/Better web apps
Pyramid Lighter/Faster/Better web appsDylan 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 PlatformAlfresco Software
 
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 / WidgetsPete DuMelle
 
Spyware/Malware FVCP
Spyware/Malware FVCPSpyware/Malware FVCP
Spyware/Malware FVCPPete 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 TwitterStraight North
 
Using the new WordPress REST API
Using the new WordPress REST APIUsing the new WordPress REST API
Using the new WordPress REST APICaldera 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 webPablo Garaizar
 
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 stackPaul Bearne
 

Ähnlich wie 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
 
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
 
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
 
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
 

Kürzlich hochgeladen

Intelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalmIntelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalmSujith Sukumaran
 
What are the key points to focus on before starting to learn ETL Development....
What are the key points to focus on before starting to learn ETL Development....What are the key points to focus on before starting to learn ETL Development....
What are the key points to focus on before starting to learn ETL Development....kzayra69
 
Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Andreas Granig
 
Ahmed Motair CV April 2024 (Senior SW Developer)
Ahmed Motair CV April 2024 (Senior SW Developer)Ahmed Motair CV April 2024 (Senior SW Developer)
Ahmed Motair CV April 2024 (Senior SW Developer)Ahmed Mater
 
Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...
Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...
Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...OnePlan Solutions
 
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...confluent
 
SuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte Germany
SuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte GermanySuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte Germany
SuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte GermanyChristoph Pohl
 
Best Web Development Agency- Idiosys USA.pdf
Best Web Development Agency- Idiosys USA.pdfBest Web Development Agency- Idiosys USA.pdf
Best Web Development Agency- Idiosys USA.pdfIdiosysTechnologies1
 
React Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief UtamaReact Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief UtamaHanief Utama
 
Implementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureImplementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureDinusha Kumarasiri
 
Cyber security and its impact on E commerce
Cyber security and its impact on E commerceCyber security and its impact on E commerce
Cyber security and its impact on E commercemanigoyal112
 
Unveiling the Future: Sylius 2.0 New Features
Unveiling the Future: Sylius 2.0 New FeaturesUnveiling the Future: Sylius 2.0 New Features
Unveiling the Future: Sylius 2.0 New FeaturesŁukasz Chruściel
 
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptxKnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptxTier1 app
 
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio, Inc.
 
Introduction Computer Science - Software Design.pdf
Introduction Computer Science - Software Design.pdfIntroduction Computer Science - Software Design.pdf
Introduction Computer Science - Software Design.pdfFerryKemperman
 
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdfGOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdfAlina Yurenko
 
Odoo 14 - eLearning Module In Odoo 14 Enterprise
Odoo 14 - eLearning Module In Odoo 14 EnterpriseOdoo 14 - eLearning Module In Odoo 14 Enterprise
Odoo 14 - eLearning Module In Odoo 14 Enterprisepreethippts
 
Cloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEECloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEEVICTOR MAESTRE RAMIREZ
 
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...OnePlan Solutions
 

Kürzlich hochgeladen (20)

Intelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalmIntelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalm
 
What are the key points to focus on before starting to learn ETL Development....
What are the key points to focus on before starting to learn ETL Development....What are the key points to focus on before starting to learn ETL Development....
What are the key points to focus on before starting to learn ETL Development....
 
Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024
 
Ahmed Motair CV April 2024 (Senior SW Developer)
Ahmed Motair CV April 2024 (Senior SW Developer)Ahmed Motair CV April 2024 (Senior SW Developer)
Ahmed Motair CV April 2024 (Senior SW Developer)
 
Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...
Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...
Tech Tuesday - Mastering Time Management Unlock the Power of OnePlan's Timesh...
 
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
 
SuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte Germany
SuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte GermanySuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte Germany
SuccessFactors 1H 2024 Release - Sneak-Peek by Deloitte Germany
 
Best Web Development Agency- Idiosys USA.pdf
Best Web Development Agency- Idiosys USA.pdfBest Web Development Agency- Idiosys USA.pdf
Best Web Development Agency- Idiosys USA.pdf
 
React Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief UtamaReact Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief Utama
 
Implementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureImplementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with Azure
 
Hot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort Service
Hot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort ServiceHot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort Service
Hot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort Service
 
Cyber security and its impact on E commerce
Cyber security and its impact on E commerceCyber security and its impact on E commerce
Cyber security and its impact on E commerce
 
Unveiling the Future: Sylius 2.0 New Features
Unveiling the Future: Sylius 2.0 New FeaturesUnveiling the Future: Sylius 2.0 New Features
Unveiling the Future: Sylius 2.0 New Features
 
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptxKnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
 
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
 
Introduction Computer Science - Software Design.pdf
Introduction Computer Science - Software Design.pdfIntroduction Computer Science - Software Design.pdf
Introduction Computer Science - Software Design.pdf
 
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdfGOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
 
Odoo 14 - eLearning Module In Odoo 14 Enterprise
Odoo 14 - eLearning Module In Odoo 14 EnterpriseOdoo 14 - eLearning Module In Odoo 14 Enterprise
Odoo 14 - eLearning Module In Odoo 14 Enterprise
 
Cloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEECloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEE
 
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
 

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 ?