2. Who am I?
Backend developer
PHP enthusiast
CTO at Darkmira
Freelance web architect
Occasional lecturer
Javascript hater!
2
3. Community involvement
ScotlandPHP (conference, November 8th and 9th)
DarkmiraTour Brasil (conference, June 7th to 9th)
DijonTech (meetup, sometimes in March)
AFUP Lorraine ("super apéro", March 14th, in a bar
in Metz)
3
4. by SpaceFox
article
Sans déconner : après huit mois d'observation,
ma conclusion la plus logique est que 95 % de la
communauté Javascript est composée de
macaques sous cocaïne. Je ne vois pas d'autres
explication logique à l'état général de
l'environnement.
“
“
4
6. Javascript alternative?
What a success!
Q. Is Dart supported by my browser?
Although no production browsers can execute
Dart code directly, all modern browsers can
execute Dart code that as been compiled to
JavaScript.
“
“
6
7. by Krishna Chaitanya Acondy
article
Can Monkeys Write JavaScript? An Impartial
Analysis
“
“
7
12. ♥ Webpack + Symfony ♥
Symfony Webpack Encore = Webpack made easy!
Symfony ships with a pure-JavaScript library -
called Webpack Encore - that makes working
with CSS and JavaScript a joy. You can use it, use
something else, or just create static CSS and JS
les in your public/ directory and include them in
your templates.
“
“
12
14. composer require symfony/skeleton myproject
cd myproject
composer require twig
Add a route
index:
path: /
controller: AppControllerHomepage::handle
And create the controller and template.
14
15. final class Homepage
{
private $renderer;
public function __construct(Environment $renderer)
{
$this->renderer = $renderer;
}
public function handle(): Response
{
return new Response($this->renderer->render(
'homepage.html.twig'
));
}
}
15
29. Still no Bootstrap...
yarn add bootstrap jquery popper.js
assets/js/app.js
yarn encore dev --watch
require('../css/app.css');
require('../../node_modules/bootstrap/dist/css/bootstrap.css'
require('bootstrap');
29
32. Enable extra features
Override bootstrap the right way:
yarn add sass-loader node-sass --dev
assets/js/app/js
// import '../css/app.css';
import '../scss/app.scss';
webpack.config.js
Encore
.enableSassLoader()
;
32
42. Add an image to the template
Add the image assets/image/webpack.svg
Edit assets/js/app.js , add
require('../image/webpack.svg');
Edit templates/homepage.html.twig , add the image tag:
The image bene ts of the cache busting/asset
versioning policy.
<img src="{{ asset('build/images/webpack.svg') }}" alt="Demo ima
42
51. Standalone
Webpack encore only, no composer required:
yarn add @symfony/webpack-encore --dev
Create your own webpack.config.js .
Read from public/build/entrypoints.json and
public/build/manifest.json
51