Symfony2 for Frontend Specialists

Symfony2 for Frontend Specialists

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

Aa75ea348d29f3fefd5df452e725942f?s=128

Joshua Estes

July 18, 2012
Tweet

Transcript

  1. None
  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