SlideShare ist ein Scribd-Unternehmen logo
1 von 21
Downloaden Sie, um offline zu lesen
Webpack Encore*
Asset management for the rest of us
*by symfony
Stefan Adolf

https://www.facebook.com/stadolf

https://twitter.com/stadolf

https://github.com/elmariachi111

https://www.linkedin.com/in/stadolf/
The frontend frontier
Lots of quirks, lots of
frameworks
LESS, Sass & Scss
PostCss, Autoprefixer,
Reboots, (Compass)…
No native package
system
Many flavors, many
frameworks
ECMAScript 6/7,
TypeScript, CommonJS
jQuery, React (JSX),
Angular, Meteor
everything boils
down to this:
Where we come from
Where we want to go
Where we are.
Repo Read Along
Gist
Pull Requests
Webpack
Support for window
globals
Babelify for ES6/7
require scss, images,
xml, templates
Webpack
Import styles from
node_modules
Automatic asset
detection 

& extraction
Webpack
initial bundling setup == no-brainer
Everything is based on Javascript
require scss, images, xml, templates
-> transformed by webpack loaders
LOTS of plugins and loaders available
Bundling process is highly configurable
Used by all major modern JS app frameworks
angular, vuejs, react, ionic
Where we are :/
Webpack Encore
Brought to you by Symfony but

plain JavaScript at heart
Replaces assetic bundle (dumped in 3.0)
generates webpack configuration
Opinionated “recipes” how fullstack
developers build assets.
Support for many modern features and
frameworks out of the box.
npm install ——save-dev
@symfony/webpack-encore
https://symfony.com/blog/introducing-
webpack-encore-for-asset-management
http://symfony.com/doc/current/
frontend.html
Where we are :/
Meaningful error messages

and installation hints
You can still use Webpack
plugins if you need them
and then
npm install 

react-dom prop-types babel-preset-react
ENCORE!
Symfony integration (> 3.3)
base.html.twig
config.yml
manifest.json
SORRY, NO
ENCORE HERE.
Stefan Adolf

https://www.facebook.com/stadolf

https://twitter.com/stadolf

https://github.com/elmariachi111

https://www.linkedin.com/in/stadolf/
I am
https://github.com/elmariachi111/encore-demo/pulls

Weitere ähnliche Inhalte

Mehr von Stefan Adolf

Was ist eine Datenbank - und was hat Blockchain damit zu tun?
Was ist eine Datenbank - und was hat Blockchain damit zu tun?Was ist eine Datenbank - und was hat Blockchain damit zu tun?
Was ist eine Datenbank - und was hat Blockchain damit zu tun?Stefan Adolf
 
Never Code Alone: Von Symfony Forms zu einer SPA auf APIs
Never Code Alone: Von Symfony Forms zu einer SPA auf APIsNever Code Alone: Von Symfony Forms zu einer SPA auf APIs
Never Code Alone: Von Symfony Forms zu einer SPA auf APIsStefan Adolf
 
Decentralize all the things
Decentralize all the thingsDecentralize all the things
Decentralize all the thingsStefan Adolf
 
Indexing Decentralized Data with Ethereum, IPFS & The Graph
Indexing Decentralized Data with Ethereum, IPFS & The GraphIndexing Decentralized Data with Ethereum, IPFS & The Graph
Indexing Decentralized Data with Ethereum, IPFS & The GraphStefan Adolf
 
Gatsby (Code.Talks) 2019
Gatsby (Code.Talks) 2019Gatsby (Code.Talks) 2019
Gatsby (Code.Talks) 2019Stefan Adolf
 
A micro service story
 A micro service story A micro service story
A micro service storyStefan Adolf
 
Api Platform: the ultimate API Platform
Api Platform: the ultimate API PlatformApi Platform: the ultimate API Platform
Api Platform: the ultimate API PlatformStefan Adolf
 
Pump up the JAM with Gatsby (2019)
Pump up the JAM with Gatsby (2019)Pump up the JAM with Gatsby (2019)
Pump up the JAM with Gatsby (2019)Stefan Adolf
 
Testing API platform with Behat BDD tests
Testing API platform with Behat BDD testsTesting API platform with Behat BDD tests
Testing API platform with Behat BDD testsStefan Adolf
 
Hack it like its hot!
Hack it like its hot!Hack it like its hot!
Hack it like its hot!Stefan Adolf
 
api-platform: the ultimate API platform
api-platform: the ultimate API platformapi-platform: the ultimate API platform
api-platform: the ultimate API platformStefan Adolf
 
Webpack Encore - Asset Management for the rest of us
Webpack Encore - Asset Management for the rest of usWebpack Encore - Asset Management for the rest of us
Webpack Encore - Asset Management for the rest of usStefan Adolf
 
(2018) Webpack Encore - Asset Management for the rest of us
(2018) Webpack Encore - Asset Management for the rest of us(2018) Webpack Encore - Asset Management for the rest of us
(2018) Webpack Encore - Asset Management for the rest of usStefan Adolf
 
Pump up the JAM with Gatsby
Pump up the JAM with GatsbyPump up the JAM with Gatsby
Pump up the JAM with GatsbyStefan Adolf
 
Using over Owning: Enable renting business models using the tangle and afford...
Using over Owning: Enable renting business models using the tangle and afford...Using over Owning: Enable renting business models using the tangle and afford...
Using over Owning: Enable renting business models using the tangle and afford...Stefan Adolf
 
Symfony Deployments on Heroku
Symfony Deployments on HerokuSymfony Deployments on Heroku
Symfony Deployments on HerokuStefan Adolf
 

Mehr von Stefan Adolf (17)

Was ist eine Datenbank - und was hat Blockchain damit zu tun?
Was ist eine Datenbank - und was hat Blockchain damit zu tun?Was ist eine Datenbank - und was hat Blockchain damit zu tun?
Was ist eine Datenbank - und was hat Blockchain damit zu tun?
 
Never Code Alone: Von Symfony Forms zu einer SPA auf APIs
Never Code Alone: Von Symfony Forms zu einer SPA auf APIsNever Code Alone: Von Symfony Forms zu einer SPA auf APIs
Never Code Alone: Von Symfony Forms zu einer SPA auf APIs
 
Decentralize all the things
Decentralize all the thingsDecentralize all the things
Decentralize all the things
 
Indexing Decentralized Data with Ethereum, IPFS & The Graph
Indexing Decentralized Data with Ethereum, IPFS & The GraphIndexing Decentralized Data with Ethereum, IPFS & The Graph
Indexing Decentralized Data with Ethereum, IPFS & The Graph
 
Gatsby (Code.Talks) 2019
Gatsby (Code.Talks) 2019Gatsby (Code.Talks) 2019
Gatsby (Code.Talks) 2019
 
A micro service story
 A micro service story A micro service story
A micro service story
 
Api Platform: the ultimate API Platform
Api Platform: the ultimate API PlatformApi Platform: the ultimate API Platform
Api Platform: the ultimate API Platform
 
Pump up the JAM with Gatsby (2019)
Pump up the JAM with Gatsby (2019)Pump up the JAM with Gatsby (2019)
Pump up the JAM with Gatsby (2019)
 
Testing API platform with Behat BDD tests
Testing API platform with Behat BDD testsTesting API platform with Behat BDD tests
Testing API platform with Behat BDD tests
 
Hack it like its hot!
Hack it like its hot!Hack it like its hot!
Hack it like its hot!
 
api-platform: the ultimate API platform
api-platform: the ultimate API platformapi-platform: the ultimate API platform
api-platform: the ultimate API platform
 
Webpack Encore - Asset Management for the rest of us
Webpack Encore - Asset Management for the rest of usWebpack Encore - Asset Management for the rest of us
Webpack Encore - Asset Management for the rest of us
 
(2018) Webpack Encore - Asset Management for the rest of us
(2018) Webpack Encore - Asset Management for the rest of us(2018) Webpack Encore - Asset Management for the rest of us
(2018) Webpack Encore - Asset Management for the rest of us
 
Pump up the JAM with Gatsby
Pump up the JAM with GatsbyPump up the JAM with Gatsby
Pump up the JAM with Gatsby
 
Using over Owning: Enable renting business models using the tangle and afford...
Using over Owning: Enable renting business models using the tangle and afford...Using over Owning: Enable renting business models using the tangle and afford...
Using over Owning: Enable renting business models using the tangle and afford...
 
OUTDATED (Encore)
OUTDATED (Encore)OUTDATED (Encore)
OUTDATED (Encore)
 
Symfony Deployments on Heroku
Symfony Deployments on HerokuSymfony Deployments on Heroku
Symfony Deployments on Heroku
 

Kürzlich hochgeladen

OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full RecordingOpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full RecordingShane Coughlan
 
Advantages of Cargo Cloud Solutions.pptx
Advantages of Cargo Cloud Solutions.pptxAdvantages of Cargo Cloud Solutions.pptx
Advantages of Cargo Cloud Solutions.pptxRTS corp
 
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptxThe Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptxRTS corp
 
Best Angular 17 Classroom & Online training - Naresh IT
Best Angular 17 Classroom & Online training - Naresh ITBest Angular 17 Classroom & Online training - Naresh IT
Best Angular 17 Classroom & Online training - Naresh ITmanoharjgpsolutions
 
[ CNCF Q1 2024 ] Intro to Continuous Profiling and Grafana Pyroscope.pdf
[ CNCF Q1 2024 ] Intro to Continuous Profiling and Grafana Pyroscope.pdf[ CNCF Q1 2024 ] Intro to Continuous Profiling and Grafana Pyroscope.pdf
[ CNCF Q1 2024 ] Intro to Continuous Profiling and Grafana Pyroscope.pdfSteve Caron
 
Strategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsStrategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsJean Silva
 
Osi security architecture in network.pptx
Osi security architecture in network.pptxOsi security architecture in network.pptx
Osi security architecture in network.pptxVinzoCenzo
 
Zer0con 2024 final share short version.pdf
Zer0con 2024 final share short version.pdfZer0con 2024 final share short version.pdf
Zer0con 2024 final share short version.pdfmaor17
 
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4jGraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4jNeo4j
 
Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + KobitonLeveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + KobitonApplitools
 
Large Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and RepairLarge Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and RepairLionel Briand
 
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdfEnhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdfRTS corp
 
Mastering Project Planning with Microsoft Project 2016.pptx
Mastering Project Planning with Microsoft Project 2016.pptxMastering Project Planning with Microsoft Project 2016.pptx
Mastering Project Planning with Microsoft Project 2016.pptxAS Design & AST.
 
Introduction to Firebase Workshop Slides
Introduction to Firebase Workshop SlidesIntroduction to Firebase Workshop Slides
Introduction to Firebase Workshop Slidesvaideheekore1
 
Keeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldKeeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldRoberto Pérez Alcolea
 
Amazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilitiesAmazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilitiesKrzysztofKkol1
 
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...OnePlan Solutions
 
Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...
Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...
Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...OnePlan Solutions
 
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdfAndrey Devyatkin
 
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...Bert Jan Schrijver
 

Kürzlich hochgeladen (20)

OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full RecordingOpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
 
Advantages of Cargo Cloud Solutions.pptx
Advantages of Cargo Cloud Solutions.pptxAdvantages of Cargo Cloud Solutions.pptx
Advantages of Cargo Cloud Solutions.pptx
 
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptxThe Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
 
Best Angular 17 Classroom & Online training - Naresh IT
Best Angular 17 Classroom & Online training - Naresh ITBest Angular 17 Classroom & Online training - Naresh IT
Best Angular 17 Classroom & Online training - Naresh IT
 
[ CNCF Q1 2024 ] Intro to Continuous Profiling and Grafana Pyroscope.pdf
[ CNCF Q1 2024 ] Intro to Continuous Profiling and Grafana Pyroscope.pdf[ CNCF Q1 2024 ] Intro to Continuous Profiling and Grafana Pyroscope.pdf
[ CNCF Q1 2024 ] Intro to Continuous Profiling and Grafana Pyroscope.pdf
 
Strategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsStrategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero results
 
Osi security architecture in network.pptx
Osi security architecture in network.pptxOsi security architecture in network.pptx
Osi security architecture in network.pptx
 
Zer0con 2024 final share short version.pdf
Zer0con 2024 final share short version.pdfZer0con 2024 final share short version.pdf
Zer0con 2024 final share short version.pdf
 
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4jGraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
 
Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + KobitonLeveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
 
Large Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and RepairLarge Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and Repair
 
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdfEnhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
 
Mastering Project Planning with Microsoft Project 2016.pptx
Mastering Project Planning with Microsoft Project 2016.pptxMastering Project Planning with Microsoft Project 2016.pptx
Mastering Project Planning with Microsoft Project 2016.pptx
 
Introduction to Firebase Workshop Slides
Introduction to Firebase Workshop SlidesIntroduction to Firebase Workshop Slides
Introduction to Firebase Workshop Slides
 
Keeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldKeeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository world
 
Amazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilitiesAmazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilities
 
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
 
Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...
Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...
Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...
 
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
 
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
 

OBSOLETE Webpack Encore - Asset Management for the Rest of Us