New in Symfony: UX Initiative - New JavaScript Ecosystem for Symfony

JavaScript (UX - User Experience). UX .

JavaScript . , , , .

: Symfony PHP Symfony Flex. Symfony Flex JavaScript - , HTTP-, .

Symfony UX.

Symfony UX: JavaScript

Symfony UX - , Symfony JavaScript. JavaScript, npm, Webpack Encore Stimulus.

Symfony UX - JavaScript: React, Vue Angular, . “opinionated software”, HTML .

Symfony UX :

1. Symfony Stimulus, JavaScript- ;

   
   
   
   
   

2. Symfony Flex Symfony Webpack Encore JavaScript-, PHP-;

   
   
   
   
   

3. UX, .

   
   
   
   
   

: PHP Symfony UX Chart.js

Symfony UX Symfony UX Chart.js. Chart.js.

Symfony UX Symfony Flex Webpack Encore:

composer update symfony/flex
yarn upgrade "@symfony/webpack-encore@^0.32.0"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

composer recipes:install symfony/webpack-encore-bundle --force -v
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. , , !

Symfony Flex PHP-, JavaScript-. , Chart.js



:

$ composer require symfony/ux-chartjs
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Using version ^1.0 for symfony/ux-chartjs
./composer.json has been updated

Synchronizing package.json with PHP packages
Don't forget to run npm or yarn to refresh your Javascript dependencies!
...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

( : package.json PHP- 

npm yarn, Javascript-!)

Symfony Flex package.json



PHP- Chart.js



. JavaScript-:

// package.json
{
    "devDependencies": {
        ...
        "@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/Resources/assets"
    }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Symfony Flex assets/controllers.json



. Stimulus, Symfony UX, Webpack Encore JavaScript-:

// assets/controllers.json
{
    "controllers": {
        "@symfony/ux-chartjs": {
            "chart": {
                "enabled": true,
                "webpackMode": "eager"
            }
        }
    },
    "entrypoints": []
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

- JavaScript- :

yarn install --force
yarn encore dev
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

… ! Symfony Flex, Symfony UX Chart.js



Symfony PHP JavaScript, .

, :

// ...
use Symfony\UX\Chartjs\Builder\ChartBuilderInterface;
use Symfony\UX\Chartjs\Model\Chart;

class HomeController extends AbstractController
{
    /**
     * @Route("/", name="homepage")
     */
    public function index(ChartBuilderInterface $chartBuilder): Response
    {
        $chart = $chartBuilder->createChart(Chart::TYPE_LINE);
        $chart->setData([
            'labels' => ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            'datasets' => [
                [
                    'label' => 'My First dataset',
                    'backgroundColor' => 'rgb(255, 99, 132)',
                    'borderColor' => 'rgb(255, 99, 132)',
                    'data' => [0, 10, 5, 2, 20, 30, 45],
                ],
            ],
        ]);

        $chart->setOptions([/* ... */]);

        return $this->render('home/index.html.twig', [
            'chart' => $chart,
        ]);
    }
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

PHP Twig:

{{ render_chart(chart) }}

{# You can pass HTML attributes as a second argument to add them on the <canvas> tag #}
{{ render_chart(chart, {'class': 'my-chart'}) }}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Chart.js



. Chart.js, .

Symfony UX github.com/symfony/ux!

, !

 

Symfony UX - : - . : Symfony UX? , Symfony? EntityType AJAX? , JavaScript, UX-.

, . : !

---

- Symfony Framework : ": Symfony Symlex".

---