Symfony on steroids : Vue.js, Mercure, Panther

•

2 likes•46,120 views

Thanks to the new capabilities of the web platform (web components, Progressive Web Apps…) and the rise of modern JS libraries (Vue, React, Angular) almost all modern Symfony applications must leverage the frontend ecosystem. Symfony 4 embed many gems that make it easy to integrate modern JavaScript within the framework, including the first component entirely written in JS: Webpack Encore. In Symfony 4.2, another component that is super convenient for apps containing JS code has been released: Panther, a PHP library compatible with BrowserKit, that drives real web browsers to create end-to-end (E2E) tests with ease. During this talk, I'll show you how to cleanly integrate modern JavaScript code with Symfony and Twig and how to test such applications using Panther. The examples will use VueJS, because it’s probably the easiest JS framework to get started with as a PHP developer, but all the tips and tricks will be applicable with other libraries such as React or Angular. Finally, we'll add some real time capabilities to our app using Mercure.rocks

Technology

Symfony on steroids 
Vue.js, Mercure, Panther

symfonycon.les-tilleuls.coop @dunglas
Kévin Dunglas
❏ Les-Tilleuls.coop’s Founder
❏ Symfony Core Team 
Panther, Serializer, WebLink, PropertyInfo, autowiring…
❏ API Platform and Mercure creator
@dunglas

symfonycon.les-tilleuls.coop @dunglas
✍ Self-managed since 2011
35 people, 1,000% in 6 years
👷 ➡ jobs@les-tilleuls.coop

symfonycon.les-tilleuls.coop @dunglas
Agenda
A joind.in clone in 40 minutes?
1. A modern Symfony app (MakerBundle, Doctrine)
2. Integrating Vue.js (Encore, API Platform)
3. UI Testing (Panther)
4. Real time update (Mercure)

symfonycon.les-tilleuls.coop
Our final app: try it now!

symfonycon.les-tilleuls.coop @dunglas
MakerBundle FTW!
A modern Symfony app

symfonycon.les-tilleuls.coop @dunglas
Install the Website Skeleton
Symfony full stack (SF + Twig + Doctrine)

symfonycon.les-tilleuls.coop @dunglas
MakerBundle
❏ Code scaffolding
❏ Entities
❏ Controllers
❏ Forms and CRUD
❏ Users and security (auth, voter)
❏ Tests
❏ Commands

symfonycon.les-tilleuls.coop @dunglas
Updating the DB, creating a controller

symfonycon.les-tilleuls.coop @dunglas
The controller

symfonycon.les-tilleuls.coop @dunglas
Twig template: a partial

symfonycon.les-tilleuls.coop @dunglas
Our basic website is ready, thanks MakerBundle!

symfonycon.les-tilleuls.coop @dunglas
A better UX thanks to Encore and API Platform
Integrating Vue.js

symfonycon.les-tilleuls.coop @dunglas
A modern feedback system
❏ Rate a talk, using a star based selector
❏ Post a comment
❏ No page reload, rich form, no form component
❏ Server-side: hypermedia API
❏ Client-side: web component (in JS)

symfonycon.les-tilleuls.coop @dunglas
Install API Platform

symfonycon.les-tilleuls.coop @dunglas
Tweaking the API

symfonycon.les-tilleuls.coop @dunglas
Vue.js
❏ Progressive framework for building interfaces
❏ Designed to be incrementally adoptable
❏ Focused on the view layer
❏ Can also power Single-Page Applications

symfonycon.les-tilleuls.coop @dunglas
Install Symfony Encore

symfonycon.les-tilleuls.coop @dunglasJoke stolen from @iamdevloper
You just installed 600+ packages, 
welcome to the JS world 😉

symfonycon.les-tilleuls.coop @dunglas
Enable Vue, register our component

symfonycon.les-tilleuls.coop @dunglas
A Vue component

notation :

notation @

v-model
The View

symfonycon.les-tilleuls.coop @dunglas
Loading the Vue component in Twig

symfonycon.les-tilleuls.coop @dunglas
Panther: the new feline on the block
😺end-2-end testing

symfonycon.les-tilleuls.coop @dunglas
Symfony Panther: an E2E testing tool
❏ Executes real web browsers (Chrome by default)
❏ Supports JavaScript, CSS, DOM…
❏ Uses the W3C WebDriver Protocol
❏ Implements the APIs of
❏ Symfony BrowserKit (you already know it!)
❏ Facebook’s PHP WebDriver
❏ Provide some extra methods:
❏ wait, execute JS, screenshot, click…
❏ Standalone lib, for testing and web scraping

symfonycon.les-tilleuls.coop @dunglas
Symfony Panther: developer-friendly
❏ Nothing to install (except Panther)
❏ Nothing to configure
❏ neither Selenium,
❏ nor a web server
❏ Panther just works!

symfonycon.les-tilleuls.coop @dunglas
Populating the database with Alice Fixtures

symfonycon.les-tilleuls.coop @dunglas
The Panther test

symfonycon.les-tilleuls.coop @dunglas
The JavaScript is executed!

symfonycon.les-tilleuls.coop @dunglas
As well as HTTP requests, you can even take screenshots!

symfonycon.les-tilleuls.coop @dunglas
The screenshot 📸, by Panther

symfonycon.les-tilleuls.coop @dunglas
Introducing the Mercure protocol
Real Time

symfonycon.les-tilleuls.coop @dunglas
Installing MercureBundle

symfonycon.les-tilleuls.coop @dunglas
The API

symfonycon.les-tilleuls.coop @dunglas
The missing parts
❏ Validation
❏ automated in 4.3? symfony/symfony#27735
❏ User and authentication
❏ make:user, make:auth (no FOSUserBundle please!)
❏ API Platform access control
❏ Deployment
❏ SymfonyCloud: symfony deploy 😻
❏ Managed Mercure.rocks (alpha)

symfonycon.les-tilleuls.coop @dunglas
One step further
❏ Admin SPA, for free
❏ api-platform.com/docs/admin
❏ Vue or React SPA, or native app, for free
❏ api-platform.com/docs/client-generator/vuejs/
We can help you!

symfonycon.les-tilleuls.coop @dunglas
Thanks! Any questions?

What's hot

ROI & Business Value of CI, CD, DevOps, DevSecOps, & Microservices

David Rico

Zero downtime deployment of micro-services with Kubernetes

Wojciech Barczyński

Today, the development and operations landscape has shifted to a more collaborative model merging the two (DevOps). Developers need to know much more about the operational components of their software - especially around network programming, services development, and continuous deployment. Likewise, the developer's IT counterpart needs to know much more about development - especially around infrastructure automation (Chef/Puppet), automated testing, and continuous deployment.

Infrastructure as Code

Robert Greiner

Kubernetes: A Short Introduction (2019)

Megan O'Keefe

Packer by HashiCorp

Łukasz Cieśluk

Talk from O'Reilly Software Architecture Conference San Jose 2019 Microservices and containers have taken the software industry by storm. Transitioning from a monolith to microservices enables you to deploy your application more frequently, independently, and reliably. However, microservice architecture has its own challenges, and it has to deal with the same problems encountered while designing distributed systems. Enter service mesh technology to the rescue. A service mesh reduces the complexity associated with microservices and provides functionality like load balancing, service discovery, traffic management, circuit breaking, telemetry, fault injection, and more. Istio is one of the best implementations of a service mesh at this point, while Kubernetes provides a platform for running microservices and automating deployment of containerized applications. Join Samir Behara to go beyond the buzz and understand microservices and service mesh technologies.

Building a scalable microservice architecture with envoy, kubernetes and istio

SAMIR BEHARA

Terraform

Pathum Fernando ☁

Backstage at CNCF Madison.pptx

BrandenTimm1

Introduction to Kong API Gateway

Yohann Ciurlik

FOSDEM 2017: GitLab CI

OlinData

Automation with ansible

Khizer Naeem

Introduction to Docker Compose

Ajeet Singh Raina

Building a CICD pipeline for deploying to containers

Amazon Web Services

In this new presentation, we will cover advanced Terraform topics (full-on DevOps). We will compare the deployment of Terraform using Azure DevOps, GitHub/GitHub Actions, and Terraform Cloud. We wrap everything up with some key takeaway learning resources in your Terraform learning adventure. NOTE: A recording of this presenting is available here: https://www.youtube.com/watch?v=fJ8_ZbOIdto&t=5574s

Infrastructure-as-Code (IaC) Using Terraform (Advanced Edition)

Adin Ermie

**Watch the full webinar at https://codefresh.io/events/terraform-gitops-codefresh/ Today we write "Infrastructure as Code" and even "Pipelines as Code", so let's start treating our "code as code" and practice CI/CD with GitOps! In this talk, we'll show you how we build and deploy applications with Terraform using GitOps and Codefresh. Cloud Posse is a Terraform power user that has developed over 130 Terraform modules which are free and open source. We'll share how we handle automation with security while making the process easy for engineers.

Terraform GitOps on Codefresh

Codefresh

GitOps è un nuovo metodo di CD che utilizza Git come unica fonte di verità per le applicazioni e per l'infrastruttura (declarative infrastructure / infrastructure as code), fornendo sia il controllo delle revisioni che il controllo delle modifiche. In questo talk vedremo i concetti alla base di CI/CD, ovvero Continuous Integration e Continuous Deployment (o anche Continuous Delivery), pratiche nello sviluppo software che permettono ai team di creare dei progetti collaborativi in modo rapido, efficiente e idealmente con meno errori. Infine vedremo come implementare un flusso di lavoro GitOps usando Github actions e ArgoCD.

GitOps: Git come unica fonte di verità per applicazioni e infrastruttura

sparkfabrik

GitOps Days Community Special Watch the video here: https://youtu.be/0v5bjysXTL8 New to GitOps or been a long-time Flux user? We'll walk you through the benefits of GitOps and then demo it in action with a sneak peak into the next gen Flux and GitOps Toolkit! * Automation! * Visibility! * Reconciliation! * Powerful use of Prometheus and Grafana! * GitOps for Helm! For Flux users, Flux v1 is decoupled into Flux v2 and GitOps Toolkit. We'll demo how this decoupling gives you more control over how you can do GitOps and with fewer steps! Join Leigh Capili and Tamao Nakahara as they show you GitOps in action with Flux and GitOps Toolkit. Note to our Flux community that Flux v2 and the GitOps Toolkit is in development and Flux v1 is in maintenance mode. These talks and upcoming guides will give you the most up-to-date info and steps to migrate once we reach feature parity and start the migration process. We are dedicated to the smoothest experience possible for our Flux community, so please join us if you'd like early access and to give us feedback for the migration process. We are really excited by the improvements and want to take this opportunity to show you what the GitOps Toolkit is all about, walk you through the guides and get your feedback! For more info, see https://toolkit.fluxcd.io/. Here's our latest blog post on Flux v2 and GitOps Toolkit updates: https://www.weave.works/blog/the-road-to-flux-v2-october-update

The Power of GitOps with Flux & GitOps Toolkit

Weaveworks

Microservices

Stephan Lindauer

Microservices & API Gateways

Kong Inc.

CD using ArgoCD(KnolX).pdf

Knoldus Inc.

What's hot (20)

ROI & Business Value of CI, CD, DevOps, DevSecOps, & Microservices

Zero downtime deployment of micro-services with Kubernetes

Infrastructure as Code

Kubernetes: A Short Introduction (2019)

Packer by HashiCorp

Building a scalable microservice architecture with envoy, kubernetes and istio

Terraform

Backstage at CNCF Madison.pptx

Introduction to Kong API Gateway

FOSDEM 2017: GitLab CI

Automation with ansible

Introduction to Docker Compose

Building a CICD pipeline for deploying to containers

Infrastructure-as-Code (IaC) Using Terraform (Advanced Edition)

Terraform GitOps on Codefresh

GitOps: Git come unica fonte di verità per applicazioni e infrastruttura

The Power of GitOps with Flux & GitOps Toolkit

Microservices

Microservices & API Gateways

CD using ArgoCD(KnolX).pdf

Similar to Symfony on steroids : Vue.js, Mercure, Panther

Progressively enhance your Symfony 4 app using Vue, API Platform, Mercure and...

Les-Tilleuls.coop

Fabien Potencier "Symfony 4 in action"

Fwdays

In collaboration with Emmanuel Cohen. At a key moment for online press in France, a major French news company chooses PHP and Symfony to extend its popular web site. We will present the architecture we designed at Sensio Labs to meet a very good performance requirement. We used Symfony2 kernel wrapping symfony 1.4 and relied on loose-coupled applications serving content from heterogeneous backend sources.

Nice performance using Sf2 cache wrapping Sf1 application

Marc Weistroff

Symfony4 - Deep dive

Salma Ghareeb

Is it possible to write a program that significantly changes its behaviour during the runtime without changing its source code? Have you ever wondered about native TypeScript support in Node.js? Or whether it is possible to write JavaScript code that syntactically feels a lot different but is still valid? The answers to these and a lot of other questions will be discussed in detail in this talk. From the basics of metaprogramming theory to practical examples of its application in enterprise projects. We are going to talk about metalinguistic abstractions, domain-specific languages, and how they can help us solve software engineering problems. We will take a look at how popular frameworks and libraries like React.js, Express.js, Nest.js and Lodash use metaprogramming to develop systems that are used worldwide. Moreover, we will learn how to think in terms of metaprograms and broaden our outlook towards the great world of metasystems.

"Applied Enterprise Metaprogramming in JavaScript", Vladyslav Dukhin

Fwdays

Code Examples: https://github.com/nolanerck/commandbox-vs-node JavaScript is everywhere, and with that so is Node.js. Developers feel they have to have Node installed for a modern development workflow. Did you know that all the core features of Node now exist in a pure CFML workflow? Everything you’ve heard about from the JavaScript/Node world can be done with CommandBox! Package management, installing dependencies, command line tooling, flipping between run-time environments, automated build and testing processes are often mentioned as tasks made easier with Node. Modern CFML developers can have all of these same benefits without ever installing Node! It all can be done from CommandBox and this preso will show you how!

ITB2019 CommandBox vs Node.js - Nolan Erck

Ortus Solutions, Corp

Sf sf v5

emmanuelcohen

Nice performance using Sf2 cache wrapping Sf1 application - Paris

Marc Weistroff

Symfony finally swiped right on envvars

Sam Marley-Jarrett

Merging two big Symfony based applications - SymfonyCon 2017

Ivo Lukac

symfony: An Open-Source Framework for Professionals (PHP Day 2008)

Fabien Potencier

Migration of a legacy project to Symfony

Pixel Federation

Symfony2 San Francisco Meetup 2009

Fabien Potencier

Symfony 2.0 on PHP 5.3

Fabien Potencier

Building Eclipse Plugins with Tycho

jsievers

Hands-on with the Symfony2 Framework

Ryan Weaver

The talk will cover how to effectively build a production-ready, full-stack app with Golang and GCP under time constraints. I'll discuss how to approach making quick and sound technical decisions and how to apply modern software engineering practices for end-to-end apps. The presentation shows, in an opinionated and "meme-ful" way, various lessons learned, tools, and key takeaways for cloud environments.

Building a full-stack app with Golang and Google Cloud Platform in one week

Dr. Felix Raab

Magento Meetup New Delhi- Console

Webkul Software Pvt. Ltd.

TIAD - DYI: A simple orchestrator built step by step

The Incredible Automation Day

Large-scaled Deploy Over 100 Servers in 3 Minutes

Hiroshi SHIBATA

Similar to Symfony on steroids : Vue.js, Mercure, Panther (20)

Progressively enhance your Symfony 4 app using Vue, API Platform, Mercure and...

Fabien Potencier "Symfony 4 in action"

Nice performance using Sf2 cache wrapping Sf1 application

Symfony4 - Deep dive

"Applied Enterprise Metaprogramming in JavaScript", Vladyslav Dukhin

ITB2019 CommandBox vs Node.js - Nolan Erck

Sf sf v5

Nice performance using Sf2 cache wrapping Sf1 application - Paris

Symfony finally swiped right on envvars

Merging two big Symfony based applications - SymfonyCon 2017

symfony: An Open-Source Framework for Professionals (PHP Day 2008)

Migration of a legacy project to Symfony

Symfony2 San Francisco Meetup 2009

Symfony 2.0 on PHP 5.3

Building Eclipse Plugins with Tycho

Hands-on with the Symfony2 Framework

Building a full-stack app with Golang and Google Cloud Platform in one week

Magento Meetup New Delhi- Console

TIAD - DYI: A simple orchestrator built step by step

Large-scaled Deploy Over 100 Servers in 3 Minutes

More from Les-Tilleuls.coop

HTTP/2 can improve the loading time of webpages up to 2 times. Did you know that it’s very easy to optimize your Symfony applications to leverage the advanced features of this new protocol? This talk also contains the announcement of 3 new PHP packages: - Symfony Mercure Component - Symfony Mercure Bundle - Mercure integration in API Platform The talk agenda: - a historically contextualized presentation of the different versions of the HTTP protocol; - a state of the protocol support in the PHP ecosystem; - a guide explaining how to serve your PHP and Symfony apps with h2, using Nginx, Apache and Docker; - many code samples showing how to use h2 to improve the loading time of your assets and APIs using the WebLink component and Twig - examples of how to take advantage of the protocol using the curl and Guzzle clients - the Mercure Protocol - Mercure x Symfony - Mercure x API Platform

HTTP/2: speed up your apps and dispatch real time updates (Symfony and API Pl...

Les-Tilleuls.coop

From a few lines of jQuery to modern React/Vue… PWA, Symfony apps always contain JavaScript code. Unfortunately, the SF functional test helper and the Goutte web scrapping lib aren’t able to execute JS code. It means that they cannot assert on client-side generated HTML, test if an element is visible or not, deal with alert boxes or detect if a bug occurs only with a specific browser. Panther is a brand new e2e testing and web scrapping library written in PHP that drives real browsers thanks to the WebDriver protocol from the W3C. It implements the exact same API than the BrowserKit component. It means than existing SF tests and Goutte scripts work without modification… but this time JS will be executed! The tool also brings new capabilities including taking screenshots, or executing custom JS in the execution context of the web page. To install Panther you only have one command to run, and it doesn’t need any dependency to install Panther. Let’s meet the feline!

Panther: test your Symfony apps with real web browsers

Les-Tilleuls.coop

During this talk, I'll present the main features of API Platform. We will install the framework, design an API data model as a set of tiny plain old PHP classes and learn how to get: * A fully featured dev environment with Symfony Flex and React containers, HTTP/2 and HTTPS support and a cache proxy * Pagination, data validation, access control, relation embedding, filters and error handling * Support for modern REST API formats: JSON-LD/Hydra, OpenAPI/Swagger, JSONAPI, HAL, JSON… * GraphQL support * An API responding in a just few milliseconds thanks to the builtin invalidation based cache mechanism * A dynamically created Material Design admin interface (a la Sonata / EasyAdmin – but 100% client-side) built with React * Client apps skeletons: React/Redux, React Native, Vue.js, Angular… Finally, we'll see ho to deploy the project in 1 command on Google Container Engine or any cloud with a Kubernetes.

API Platform: A Framework for API-driven Projects

Les-Tilleuls.coop

Install API Platform. Design the API data model as a set of tiny plain old PHP classes. Instantly get: - Fully featured dev environment with Symfony Flex and React containers, HTTP/2 and HTTPS support and a cache proxy - Pagination, data validation, access control, relation embedding, filters and error handling - Support for modern REST API formats: JSON-LD/Hydra, OpenAPI/Swagger, JSONAPI, HAL, JSON... - GraphQL support - An API responding in a just few milliseconds thanks to the builtin invalidation based cache mechanism - A dynamically created Material Design admini interface (a la Sonata / EasyAdmin - but 100% client-side) built with React. - Client apps skeletons: React/Redux, React Native, Vue.js, Angular... Finally, deploy in 1 command on Google Container Engine or any cloud with a Kubernetes instance with the provided Helm chart. Yes, you just need is describing a data model, just a few line of codes to get all of that!

API Platform and Symfony: a Framework for API-driven Projects

Les-Tilleuls.coop

API Platform: Full Stack Framework Resurrection

Les-Tilleuls.coop

Learn how to use API Platform and Symfony to create super easily rich web and mobile applications relying on React (JS) for their presentational layer. In just a few minutes, we will create a hypermedia API thanks to API Platform, Symfony and Doctrine. We will do it step by step, and the API will be 100% functional with support for pagination, validation, filters, resources embedding. The API will be automatically documented using Swagger and Hydra and beautiful user interface for developers will be available. HTTP cache, authorization and authentication can then be added in a breath. Then, we will introduce all new client-side tools for API Platform: * A fully featured JavaScript (Single Page App) administration system with a modern user interface (Material Design) ; built on top of Admin On Rest (React and Redux). This admin is builded dynamically thanks to the API discoverability (Hydra). * A raw React, Redux and React Router code generator to bootstrap fully-featured Single Page Applications and native mobile apps thanks to the API documentation exposed by API Platform (client-side and server-side validation, on fields error, Twitter Bootstrap compatibility, a11y support...)

API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)

Les-Tilleuls.coop

**Download the PPT to see screencasts** API Platform is new open source PHP framework dedicated to the creation of modern web APIs. It allows to bootstrap a fully featured API (pagination, validation, filtering, sorting, automatically generated documentation, HTTP cache, OAuth and JWT auth...) in just a few minutes. It exposes out of the box popular API formats including Swagger, JSON-LD, Hydra, HAL, JSONAPI and Schema.org. It is extensible and can be specialized with ease. Because it is built on top of the industry-leading Symfony framework, it already counts hundreds of available extensions (bundles). In this talk, I'll show how to create a hypermedia API in just a few lines of codes, then take a look to the main features of the framework.

Creating hypermedia APIs in a few minutes using the API Platform framework

Les-Tilleuls.coop

Symfony 2 : Performances et Optimisations

Les-Tilleuls.coop

Diaporama du sfPot Lillois du 20 mars 2014

Les-Tilleuls.coop

Diaporama diffusé lors du workshop du 31/01/2013 sur le référencement naturel grâce à la sémantique du HTML5 organisé par La Coopérative des Tilleuls animé par Kévin Dunglas. Au programme : Introduction au référencement Présentation des balises sémantiques de HTML5 Comprendre l’algorithme de « outline » HTML5 pour mettre en valeur l’information pertinente Mettre en avant ses pages dans les moteurs de recherche avec les microdata, Schema.org et les extraits enrichis Allez plus loin, jouer avec Javascript pour référencer des SPA (Single Page Application) Ce workshop, gratuit sur réservation, est une introduction au lancement de notre pôle formation dont vous découvrirez très prochainement le site et toutes les formations professionnelles proposées.

Workshop HTML5 : référencement grâce à la sémantique

Les-Tilleuls.coop

A la demande générale La Coopérative des Tilleuls vous invite à un troisième workshop d'initiation aux technologies du web. Après avoir appris les bases de HTML lors du premier workshop et de CSS lors du second, nous réaliserons ensemble l'intégration complète d'une page web à partir d'une maquette graphique. Nous apprendrons à découper une maquette afin de la transformer en page web puis nous reverrons les techniques apprises lors des premiers ateliers et les mettrons en pratique sur ce cas concret. C'est l'occasion pour ceux qui n'ont pas pu assister aux séances précédentes de prendre le train en marche et pour les autres de se perfectionner.

Atelier #3 intégration html

Les-Tilleuls.coop

Second atelier gratuit autour des technologies HTML5 / CSS3 / Javascript organisé par La Coopérative des Tilleuls. Au menu cette fois-ci une initiation à l'intégration web grâce aux feuilles de style CSS. Après avoir appris lors du premier atelier à créer et à structurer des pages web grâce à HTML, nous verrons comment les mettre en forme avec les feuilles de style en cascade CSS. Nous découvrirons ensembles : - les fondements du langage CSS (syntaxe, cascade, sélecteurs) - quelques balises et attributs HTML utiles pour la CSS - le formatage de texte (police, couleur, gras, italique...) - le positionnement des éléments - les couleurs et images de fond

Atelier #2 initiation à css

Les-Tilleuls.coop

Présentation diffusée lors de la première d'une série d'ateliers gratuits autour du développement front-end HTML5 / CSS3 / Javascript animés par la Coopérative des Tilleuls. Au menu de celui-ci : - Comprendre le fonctionnement d'internet, du web et du mode de communication client-serveur - Présentation générale des trois grands piliers des technologies web client : HTML (structuration), CSS (présentation) et Javascript (intéractivité) - Réaliser sa première page HTML Ces ateliers ouverts à tous dans la limite des places disponibles sont encadrés par des professionnels du développement coopérateurs de La Coopérative des Tilleuls.

Atelier initiation au html5

Les-Tilleuls.coop

More from Les-Tilleuls.coop (13)

HTTP/2: speed up your apps and dispatch real time updates (Symfony and API Pl...

Panther: test your Symfony apps with real web browsers

API Platform: A Framework for API-driven Projects

API Platform and Symfony: a Framework for API-driven Projects

API Platform: Full Stack Framework Resurrection

API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)

Creating hypermedia APIs in a few minutes using the API Platform framework

Symfony 2 : Performances et Optimisations

Diaporama du sfPot Lillois du 20 mars 2014

Workshop HTML5 : référencement grâce à la sémantique

Atelier #3 intégration html

Atelier #2 initiation à css

Atelier initiation au html5

Recently uploaded

JohnPollard-hybrid-app-RailsConf2024.pptx

JohnPollard37

AWS Community Day CPH - Three problems of Terraform

Andrey Devyatkin

In today's digital world, trust is key to customer relationships, but keeping it is a huge challenge. Customers are well-informed and empowered, quick to change brands if their trust is broken, even if it costs them more. This puts a lot of pressure on organizations to handle trust and safety issues with great care and transparency. The challenge, however, is real. Fragmented solutions have left privacy, legal, and security teams in a perpetual cycle of catch-up, struggling to update privacy notices, manage customer data rights, and answer lengthy security questionnaires—all while trying to prove ROI to the business. It's a thankless job, filled with repetition, tedious tasks, and constant interdepartmental coordination. Combine this with fast regulatory changes and the quick evolution of AI, and it becomes overwhelming. Join this webinar to learn more about TrustArc's new innovative solution Trust Center, the only unified, no-code online hub for trust and safety information built for privacy, security, compliance, and legal teams. Trust Center streamlines your path to compliance, shortens the pre-sales cycle, and reduces both legal and regulatory risks, saving time, effort, and cost. This webinar will review: - Why companies are building unified Trust Centers for a robust privacy program. - How unified Trust Centers streamline sales cycles, ensure regulatory compliance, and reduce operational bottlenecks. - How compliance, legal, security, GRC, and privacy teams benefit from a unified Trust Center in terms of needs, pains, and outcomes. - How TrustArc Trust Center saves time and work while reducing legal, reputational, and compliance risk by effectively managing policies, notices, terms, and disclosures, and providing real-time updates on subprocessors.

TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...

TrustArc

Introduction to use of FHIR Documents in ABDM

Kumar Satyam

💥 You’re lucky! We’ve found two different (lead) developers that are willing to share their valuable lessons learned about using UiPath Document Understanding! Based on recent implementations in appealing use cases at Partou and SPIE. Don’t expect fancy videos or slide decks, but real and practical experiences that will help you with your own implementations. 📕 Topics that will be addressed: • Training the ML-model by humans: do or don't? • Rule-based versus AI extractors • Tips for finding use cases • How to start 👨‍🏫👨‍💻 Speakers: o Dion Morskieft, RPA Product Owner @Partou o Jack Klein-Schiphorst, Automation Developer @Tacstone Technology

DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam

UiPathCommunity

In this keynote, Asanka Abeysinghe, CTO,WSO2 will explore the shift towards platformless technology ecosystems and their importance in driving digital adaptability and innovation. We will discuss strategies for leveraging decentralized architectures and integrating diverse technologies, with a focus on building resilient, flexible, and future-ready IT infrastructures. We will also highlight WSO2's roadmap, emphasizing our commitment to supporting this transformative journey with our evolving product suite.

Platformless Horizons for Digital Adaptability

WSO2

Simplifying Mobile A11y Presentation.pptx

MarkSteadman7

The microservices honeymoon is over. When starting a new project or revamping a legacy monolith, teams started looking for alternatives to microservices. The Modular Monolith, or 'Modulith', is an architecture that reaps the benefits of (vertical) functional decoupling without the high costs associated with separate deployments. This talk will delve into the advantages and challenges of this progressive architecture, beginning with exploring the concept of a 'module', its internal structure, public API, and inter-module communication patterns. Supported by spring-modulith, the talk provides practical guidance on addressing the main challenges of a Modultith Architecture: finding and guarding module boundaries, data decoupling, and integration module-testing. You should not miss this talk if you are a software architect or tech lead seeking practical, scalable solutions. About the author With two decades of experience, Victor is a Java Champion working as a trainer for top companies in Europe. Five thousands developers in 120 companies attended his workshops, so he gets to debate every week the challenges that various projects struggle with. In return, Victor summarizes key points from these workshops in conference talks and online meetups for the European Software Crafters, the world’s largest developer community around architecture, refactoring, and testing. Discover how Victor can help you on victorrentea.ro : company training catalog, consultancy and YouTube playlists.

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024

Victor Rentea

Vector Search -An Introduction in Oracle Database 23ai.pptx

Remote DBA Services

Dubai, often portrayed as a shimmering oasis in the desert, faces its own set of challenges, including the occasional threat of flooding. Despite its reputation for opulence and modernity, the emirate is not immune to the forces of nature. In recent years, Dubai has experienced sporadic but significant floods, testing the resilience of its infrastructure and communities. Among the critical lifelines in this bustling metropolis is the Dubai International Airport, a bustling hub that connects the city to the world. This article explores the intersection of Dubai flood events and the resilience demonstrated by the Dubai International Airport in the face of such challenges.

Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...

Orbitshub

Explore the latest trends and insights on JavaScript usage with Pixlogix's informative blog. Discover key statistics and facts about JavaScript's role in web development, its popularity among developers, and its impact on modern websites. Stay updated with the evolving landscape of JavaScript frameworks and libraries, and learn how they're shaping the future of web development. Gain valuable insights to enhance your JavaScript skills and stay ahead in the digital realm.

JavaScript Usage Statistics 2024 - The Ultimate Guide

Pixlogix Infotech

Stronger Together: Developing an Organizational Strategy for Accessible Desig...

caitlingebhard1

In this session, we will discuss the journey of API governance from its initial, ungoverned state to the development of sophisticated models that tackle contemporary challenges. We'll explore how APIs have become essential in the intersection of business and technology, adapting to advancements and evolving needs. We'll focus on how organizations have moved from launching to monetizing APIs, using models like pay-per-use and subscriptions, and finding the right balance between technical implementation and business strategy. We'll also highlight the impact of governance on monetization strategies, especially how data security, compliance, and service quality influence pricing. Real-world examples will demonstrate the effective integration of governance with monetization, including AI's role in dynamic pricing. Looking ahead, we'll share insights into future trends in API governance and monetization, emphasizing the importance of adaptability, continuous learning, and innovation.

API Governance and Monetization - The evolution of API governance

WSO2

Join our latest Connector Corner webinar to discover how UiPath Integration Service revolutionizes API-centric automation in a 'Quote to Cash' process—and how that automation empowers businesses to accelerate revenue generation. A comprehensive demo will explore connecting systems, GenAI, and people, through powerful pre-built connectors designed to speed process cycle times. Speakers: James Dickson, Senior Software Engineer Charlie Greenberg, Host, Product Marketing Manager

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

DianaGray10

Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood

Juan lago vázquez

Architecting Cloud Native Applications

WSO2

Discover the innovative features and strategic vision that keep WSO2 an industry leader. Explore the exciting 2024 roadmap of WSO2 API management, showcasing innovations, unified APIM/APK control plane, natural language API interaction, and cloud native agility. Discover how open source solutions, microservices architecture, and cloud native technologies unlock seamless API management in today's dynamic landscapes. Leave with a clear blueprint to revolutionize your API journey and achieve industry success!

WSO2's API Vision: Unifying Control, Empowering Developers

WSO2

[BuildWithAI] Introduction to Gemini.pdf

Sandro Moreira

Tracing the root cause of a performance issue requires a lot of patience, experience, and focus. It’s so hard that we sometimes attempt to guess by trying out tentative fixes, but that usually results in frustration, messy code, and a considerable waste of time and money. This talk explains how to correctly zoom in on a performance bottleneck using three levels of profiling: distributed tracing, metrics, and method profiling. After we learn to read the JVM profiler output as a flame graph, we explore a series of bottlenecks typical for backend systems, like connection/thread pool starvation, invisible aspects, blocking code, hot CPU methods, lock contention, and Virtual Thread pinning, and we learn to trace them even if they occur in library code you are not familiar with. Attend this talk and prepare for the performance issues that will eventually hit any successful system. About authorWith two decades of experience, Victor is a Java Champion working as a trainer for top companies in Europe. Five thousands developers in 120 companies attended his workshops, so he gets to debate every week the challenges that various projects struggle with. In return, Victor summarizes key points from these workshops in conference talks and online meetups for the European Software Crafters, the world’s largest developer community around architecture, refactoring, and testing. Discover how Victor can help you on victorrentea.ro : company training catalog, consultancy and YouTube playlists.

Finding Java's Hidden Performance Traps @ DevoxxUK 2024

Victor Rentea

Webinar Recording: https://www.panagenda.com/webinars/why-teams-call-analytics-is-critical-to-your-entire-business Nothing is as frustrating and noticeable as being in an important call and being unable to see or hear the other person. Not surprising then, that issues with Teams calls are among the most common problems users call their helpdesk for. Having in depth insight into everything relevant going on at the user’s device, local network, ISP and Microsoft itself during the call is crucial for good Microsoft Teams Call quality support. To ensure a quick and adequate solution and to ensure your users get the most out of their Microsoft 365. But did you know that ‘bad calls’ are also an excellent indicator of other problems arising? Precisely because it is so noticeable!? Like the canary in the mine, bad calls can be early indicators of problems. Problems that might otherwise not have been noticed for a while but can have a big impact on productivity and satisfaction. Join this session by Christoph Adler to learn how true Microsoft Teams call quality analytics helped other organizations troubleshoot bad calls and identify and fix problems that impacted Teams calls or the use of Microsoft365 in general. See what it can do to keep your users happy and productive! In this session we will cover - Why CQD data alone is not enough to troubleshoot call problems - The importance of attributing call problems to the right call participant - What call quality analytics can do to help you quickly find, fix-, and prevent problems - Why having retrospective detailed insights matters - Real life examples of how others have used Microsoft Teams call quality monitoring to problem shoot problems with their ISP, network, device health and more.

Why Teams call analytics are critical to your entire business

panagenda

Recently uploaded (20)

JohnPollard-hybrid-app-RailsConf2024.pptx

AWS Community Day CPH - Three problems of Terraform

TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...

Introduction to use of FHIR Documents in ABDM

DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam

Platformless Horizons for Digital Adaptability

Simplifying Mobile A11y Presentation.pptx

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024

Vector Search -An Introduction in Oracle Database 23ai.pptx

Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...

JavaScript Usage Statistics 2024 - The Ultimate Guide

Stronger Together: Developing an Organizational Strategy for Accessible Desig...

API Governance and Monetization - The evolution of API governance

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood

Architecting Cloud Native Applications

WSO2's API Vision: Unifying Control, Empowering Developers

[BuildWithAI] Introduction to Gemini.pdf

Finding Java's Hidden Performance Traps @ DevoxxUK 2024

Why Teams call analytics are critical to your entire business

Symfony on steroids : Vue.js, Mercure, Panther

1. Symfony on steroids  Vue.js, Mercure, Panther

2. symfonycon.les-tilleuls.coop @dunglas Kévin Dunglas ❏ Les-Tilleuls.coop’s Founder ❏ Symfony Core Team  Panther, Serializer, WebLink, PropertyInfo, autowiring… ❏ API Platform and Mercure creator @dunglas

3. symfonycon.les-tilleuls.coop @dunglas ✍ Self-managed since 2011 35 people, 1,000% in 6 years 👷 ➡ jobs@les-tilleuls.coop

4. symfonycon.les-tilleuls.coop @dunglas

5. symfonycon.les-tilleuls.coop @dunglas Agenda A joind.in clone in 40 minutes? 1. A modern Symfony app (MakerBundle, Doctrine) 2. Integrating Vue.js (Encore, API Platform) 3. UI Testing (Panther) 4. Real time update (Mercure)

6. symfonycon.les-tilleuls.coop Our final app: try it now!

7. symfonycon.les-tilleuls.coop @dunglas MakerBundle FTW! A modern Symfony app

8. symfonycon.les-tilleuls.coop @dunglas Install the Website Skeleton Symfony full stack (SF + Twig + Doctrine)

9. symfonycon.les-tilleuls.coop @dunglas MakerBundle ❏ Code scaffolding ❏ Entities ❏ Controllers ❏ Forms and CRUD ❏ Users and security (auth, voter) ❏ Tests ❏ Commands

10.

11.

12. symfonycon.les-tilleuls.coop @dunglas Updating the DB, creating a controller

13. symfonycon.les-tilleuls.coop @dunglas The controller

14. symfonycon.les-tilleuls.coop @dunglas Twig template: a partial

15. Twig Templates

16. symfonycon.les-tilleuls.coop @dunglas Our basic website is ready, thanks MakerBundle!

17. symfonycon.les-tilleuls.coop @dunglas A better UX thanks to Encore and API Platform Integrating Vue.js

18.

19. symfonycon.les-tilleuls.coop @dunglas A modern feedback system ❏ Rate a talk, using a star based selector ❏ Post a comment ❏ No page reload, rich form, no form component ❏ Server-side: hypermedia API ❏ Client-side: web component (in JS)

20.

21. symfonycon.les-tilleuls.coop @dunglas Install API Platform

22.

23. symfonycon.les-tilleuls.coop @dunglas Tweaking the API

24.

25. symfonycon.les-tilleuls.coop @dunglas Vue.js ❏ Progressive framework for building interfaces ❏ Designed to be incrementally adoptable ❏ Focused on the view layer ❏ Can also power Single-Page Applications

26. symfonycon.les-tilleuls.coop @dunglas Install Symfony Encore

27. symfonycon.les-tilleuls.coop @dunglasJoke stolen from @iamdevloper You just installed 600+ packages,  welcome to the JS world 😉

28. symfonycon.les-tilleuls.coop @dunglas Enable Vue, register our component

29. symfonycon.les-tilleuls.coop @dunglas

30. symfonycon.les-tilleuls.coop @dunglas A Vue component

31. notation : notation @ v-model The View

32. The ViewModel

33. symfonycon.les-tilleuls.coop @dunglas Loading the Vue component in Twig

34.

35. symfonycon.les-tilleuls.coop @dunglas Panther: the new feline on the block 😺end-2-end testing

36. symfonycon.les-tilleuls.coop @dunglas

37. symfonycon.les-tilleuls.coop @dunglas Symfony Panther: an E2E testing tool ❏ Executes real web browsers (Chrome by default) ❏ Supports JavaScript, CSS, DOM… ❏ Uses the W3C WebDriver Protocol ❏ Implements the APIs of ❏ Symfony BrowserKit (you already know it!) ❏ Facebook’s PHP WebDriver ❏ Provide some extra methods: ❏ wait, execute JS, screenshot, click… ❏ Standalone lib, for testing and web scraping

38. symfonycon.les-tilleuls.coop @dunglas Symfony Panther: developer-friendly ❏ Nothing to install (except Panther) ❏ Nothing to configure ❏ neither Selenium, ❏ nor a web server ❏ Panther just works!

39. symfonycon.les-tilleuls.coop @dunglas Populating the database with Alice Fixtures

40. symfonycon.les-tilleuls.coop @dunglas The Panther test

41. symfonycon.les-tilleuls.coop @dunglas The JavaScript is executed!

42. symfonycon.les-tilleuls.coop @dunglas As well as HTTP requests, you can even take screenshots!

43. symfonycon.les-tilleuls.coop @dunglas The screenshot 📸, by Panther

44. symfonycon.les-tilleuls.coop @dunglas Introducing the Mercure protocol Real Time

45. symfonycon.les-tilleuls.coop

46. symfonycon.les-tilleuls.coop @dunglas

47. symfonycon.les-tilleuls.coop @dunglas

48. symfonycon.les-tilleuls.coop @dunglas Installing MercureBundle

49. symfonycon.les-tilleuls.coop @dunglas The API

50. symfonycon.les-tilleuls.coop @dunglas

51. symfonycon.les-tilleuls.coop @dunglas

52. The ViewModel

53. Subscribing to real time events

54. symfonycon.les-tilleuls.coop @dunglas The missing parts ❏ Validation ❏ automated in 4.3? symfony/symfony#27735 ❏ User and authentication ❏ make:user, make:auth (no FOSUserBundle please!) ❏ API Platform access control ❏ Deployment ❏ SymfonyCloud: symfony deploy 😻 ❏ Managed Mercure.rocks (alpha)

55. symfonycon.les-tilleuls.coop @dunglas One step further ❏ Admin SPA, for free ❏ api-platform.com/docs/admin ❏ Vue or React SPA, or native app, for free ❏ api-platform.com/docs/client-generator/vuejs/ We can help you!

56. symfonycon.les-tilleuls.coop @dunglas Thanks! Any questions?

Symfony on steroids : Vue.js, Mercure, Panther

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Symfony on steroids : Vue.js, Mercure, Panther

Similar to Symfony on steroids : Vue.js, Mercure, Panther (20)

More from Les-Tilleuls.coop

More from Les-Tilleuls.coop (13)

Recently uploaded

Recently uploaded (20)

Symfony on steroids : Vue.js, Mercure, Panther

Symfony on steroids : Vue.js, Mercure, Panther

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Symfony on steroids : Vue.js, Mercure, Panther

Similar to Symfony on steroids : Vue.js, Mercure, Panther (20)

More from Les-Tilleuls.coop

More from Les-Tilleuls.coop (13)

Recently uploaded

Recently uploaded (20)

Symfony on steroids : Vue.js, Mercure, Panther

Symfony on steroids : Vue.js, Mercure, Panther

Similar to Symfony on steroids : Vue.js, Mercure, Panther

Similar to Symfony on steroids : Vue.js, Mercure, Panther (20)

Symfony on steroids : Vue.js, Mercure, Panther