Symfony2 for Frontend Specialists

Covers most of what a frontend designer needs to be able to be great at working with Symfony2.

Transcript

2. Symfony2 for Frontend Specialists Joshua Estes <Joshua.Estes@iostudio.com>
3. Install the io-symfony-standard git clone git@git.iostudiohq.com:io-symfony-standard.git project-name cd project-name rm -rf .git/ cp app/config/parameters.yml.dist app/config/parameters.yml curl -s http://getcomposer.org/installer | php php composer.phar install git init git remote add origin git@git.iostudiohq.com:project-name.git git add . git commit -m “initial commit” git push origin master
4. Application Structure project/ app/ ← config stuff (some templates) build/ ← jenkins build src/ ← code & templates vendor/ ← contains code web/ ← web root http://symfony.com/doc/current/book/page_creation.html#the-directory-structure
5. Configuration Files • app/config/parameters.yml – set your database settings and other settings, if there are any.
6. Open thy browser • http://localhost/app_dev.php – development mode – edit your css without having to rebuild • http://localhost/app.php – Production – For this to look right, you need to install assets and dump assetic – app.php is optional
7. Error Pages • app/Resources/TwigBundle/views/Exception/ – error404.html.twig – error500.html.twig – error.html.twig • fallback/default
8. Finding Templates • Places to look – app/Resources/ – src/*/*/Resources/views • src/iostudio/DefaultBundle/Resources/views
9. Where is it? • ::base.html.twig – app/Resources/views/base.html.twig • iostudioDefaultBundle:Default:index.html.twig – src/iostudio/DefaultBundle/Resources/views/Default/index.html.twig • iostudioDefaultBundle:Foo:bar.html.twig – src/iostudio/DefaultBundle/Resources/views/Foo/bar.html.twig • iostudioDefaultBundle::layout.html.twig – src/iostudio/DefaultBundle/Resources/views/layout.html.twig
10. Include and Extends • Bundle:Controller:Template • {% extends “::base.html.twig” %} • {% include “::navigation.html.twig” %}
11. Assetic • Manage your assets • Place them in src/*/*/Resources/public – src/iostudio/DefaultBundle/Resources/public/{js,css,images} • minify your javascript/stylesheets
12. Assetic Example {% stylesheets “bundles/iostudiodefault/css/main.css” “bundles/iostudiodefault/css/other.css” filter=”?yui_css,cssrewrite” %} <link rel=”stylesheet” href=”{{ asset_url }}” /> {% endstylesheets %} • Pulls files from web/bundles/iostudiodefault/css/ • php app/console assets:install web --symlink • filters • yui_css • uses yui compressor to minify stylesheets • the ? will only compress the assets if it's in production environment • cssrewrite • assetic will put the stylesheets in a different location • this filter helps make sure all the url() stuff work correctly
13. What about javascript? {% javascripts “bundles/iostudiodefault/js/app.js” “bundles/iostudiodefault/js/other.js” filter=”?yui_js” %} <script type=”text/javascript” src=”{{ asset_url }}”></script> {% javascripts %}
14. Links • php app/console router:debug – See what there is to work with • <a href=”{{ path('homepage') }}”>Home</a> – <a href=”/”>Home</a> • <a href=”{{ path('articles') }}”>Articles</a> – <a href=”/articles”>Articles</a>
15. Links (continued) • Need an absolute path? – <a href=”{{ url('home') }}”>Home</a> – <a href=”http://example.com”>Home</a> • <a href="{{ path('article_show', { 'slug': article.slug }) }}">{{ article.title }}</a> – <a href="/article/show/this-is-the-slug">Article</a>
16. Images/Assets • <img src=”{{ asset('images/logo.png') }}” /> • <script src=”{{ asset('js/app.js') }}”></script> • <img src=”{{ asset('bundles/iostudiodefault/images/logo.png') }}”/> • Benefits? – No need to worry if deployment puts app in subfolder (ie /app vs /) or not.
17. CLI, Love it/Hate it • php app/console cache:clear • php app/console assetic:dump • php app/console assets:install web • php app/console router:debug • php app/console doctrine:database:create • php app/console doctrine:database:drop • php app/console doctrine:schema:update
18. cache:clear
19. assets:install
20. assetic:dump
21. Database • php app/console doctrine:database:create • php app/console doctrine:database:drop • php app/console doctrine:schema:update --force --complete
22. Deployment • Merge your working branch into the develop branch • Push develop branch • Jenkins takes care of rest – syntax checking
23. References • http://symfony.com • http://twig-project.com • http://symfony.com/doc/master/book/templating.html#tags-and-helpers • http://twig.sensiolabs.org/doc/templates.html – Keep in mind that this does not assume you are using Symfony2
24. Questions? Joshua Estes <Joshua.Estes@iostudio.com> @JoshuaEstes