심포니 UX를 사용해 보았습니다.

15881 단어 심포니

Symfony UX란 무엇입니까?



여기에 자세히 써 있습니다.
htps : // sym funy. 이 m / b ぉ g / 네 w - 니 - sym fu ny - ぇ- x- 니이치 치 ゔ ぇ - 음 w sym fu ny

씹어서 설명하면, 사용자 경험을 중시한 직관적이고 현대적인 WEB 사이트의 개발에 JavaScript는 필요 불가결합니다만, 모놀리식인 WEB 앱을 만들 때의 JavaScript의 개발은 상당히 생각하는 일이 많아, 수고가 걸립니다. 패키지를 선택하고, 구성하고, 페이지에 통합하고, 프런트 엔드 코드를 인프라의 다른 부분과 상호 작용하는 등.
이 문제를 해결하기 위해 고안된 것이 Symfony UX입니다. Symfony UX는 Symfony와 JavaScript 에코시스템 사이의 교량을 하기 위한 도구로, 이것을 사용하면 이런 식으로 JavaScript 라이브러리를 사용할 수 있습니다.

또한 Symfony UX는 특정 JavaScript 프레임워크에 의존하지 않으므로 필요에 따라 React, Vue 등의 프레임워크를 사용할 수 있습니다.

컨트롤러
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,
        ]);
    }
}

보기
{{ 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'}) }}

아직 정식으로 릴리스된 것은 아니고 개발 단계입니다만, 재미있을 것 같기 때문에 만져 보았습니다.

만져보세요



우선 프로젝트 만들기
$ symfony new ux-test --full

Webpack encore Bundle 및 Symfony UX 차트 라이브러리 설치
$ composer req symfony/webpack-encore-bundle symfony/ux-chartjs

그러면 Symfony가 Symfony UX 라이브러리를 찾아 package.json에 자동으로 다음 설명을 추가합니다.

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

또한 assets/controllers.json가 자동으로 만들어집니다.

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

JavaScript 종속성을 설치하고 빌드합니다.
$ yarn install
$ yarn  dev

자바스크립트 관련 작업은 이상으로 끝납니다! 나머지는 컨트롤러와 뷰를 만드는 것입니다.
다음 명령으로 컨트롤러와 뷰를 작성하십시오.
$ bin/console make:controller HomeController

생성된 컨트롤러를 다음과 같이 수정합니다. Chart.js에 건네주는 옵션류를 모두 PHP상 완결시킬 수가 있습니다.

src/HomeController.php
...
<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\UX\Chartjs\Builder\ChartBuilderInterface;
use Symfony\UX\Chartjs\Model\Chart;

class HomeController extends AbstractController
{
    /**
     * @Route("/home", name="home")
     */
    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,
        ]);
    }
}

보기에서는 컨트롤러에서 만든 chart 모델을 렌더링 함수에 전달하기만 하면 됩니다.

templates/home/index.html.twig
{% extends 'base.html.twig' %}

{% block title %}Hello HomeController!{% endblock %}

{% block body %}
    {{ render_chart(chart) }}
{% endblock %}
templates/base.html.twig 에서 자바 스크립트를로드하는 것도 잊지 마세요. !

templates/base.html.twig
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {# Run `composer require symfony/webpack-encore-bundle`
           and uncomment the following Encore helpers to start using Symfony UX #}
        {% block stylesheets %}
            {#{{ encore_entry_link_tags('app') }}#}
        {% endblock %}

        {% block javascripts %}
            {{ encore_entry_script_tags('app') }} # ←　コメントアウトを解除して、ビルドしたJavaScriptを読み込ませる
        {% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
    </body>
</html>

서버를 세우고 htps://127.0.0.1:8000에 액세스하면 이러한 화면이 나올 것입니다. 완성!
$ symfony server:start



소감



지금까지는, 그래프의 표시등으로 JavaScript의 라이브러리를 사용하려고 하면 템플릿상에서 for 문이나 if 문을 구사하는 것이 필요해, 아무래도 가독성이 떨어져 버렸습니다. Symfony UX를 사용하는 것으로, JavaScript에 건네주는 파라미터등을 모두 PHP상에서 완결할 수 있게 되는 것은 매우 좋다고 생각했습니다.

다만, 아직 개발 단계의 아이디어이므로 대응하고 있는 JavaScript의 패키지는 매우 적은 것이 난점일까라고 생각했습니다. 또, 렌더링 함수의 구현에 따라서는 JavaScript 라이브러리 네이티브에서는 사용할 수 있는 옵션을 사용할 수 없게 되어 버리거나 하는 일도 있을까라고.
또, API-SPA 구성의 앱에서는 우선 사용되지 않는다고 생각하기 때문에, 그렇게 한 면에서도 개발이 진행되는지 걱정입니다. 개인적으로는 모놀리식인 앱은 좋아하므로 개발이 활발해지면 기쁩니다만(´・ω・`)
Guzzle 첫걸음
symfony twig에서 현재 URL을 얻는 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage