Guillaume CABANEL guillaumecabanel

Comment gérer la complexité des vues en Rails avec ViewComponent ?

Une application Web est vite amenée à présenter des vues complexes.

Des éléments asyncrones peuvent être ajoutés à la page.

Des éléments peuvent être ajoutés ou supprimés dynamiquement.

Il faut respecter la cohérence de l'UI.

build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)

ci: Changes to our CI configuration files and scripts (examples: CircleCi, SauceLabs)

docs: Documentation only changes

feat: A new feature

/ your_view.html.slim
div#something data-api-key=(ENV['API_KEY'])

// your_file.js
const apiKey = document.getElementById('something').dataset.apiKey

<div class="title">Hello</div>

source :

	/ app/views/cookies_eu/_consent_banner.html.slim

	- unless session[:accept_google_analytics].present?
	= link_to t('cookies.deny'), url_for(controller: controller_name, action: action_name, accept_google_analytics: 'no' )
	= link_to t('cookies.ok'), url_for(controller: controller_name, action: action_name, accept_google_analytics: 'yes' )

	.max-w-sm.rounded.overflow-hidden.shadow-lg
	= image_tag image_url, class:"w-full"
	.px-6.py-4
	.font-bold.text-xl.mb-2 = title
	p.text-gray-700.text-base = content

	.px-6.py-4
	- tags.each do \|tag\|
	span.inline-block.bg-gray-200.rounded-full.px-3.py-1.text-sm.font-semibold.text-gray-700.mr-2
	= tag

	/ app/views/layouts/application.html.slim

	doctype html
	html
	head
	meta charset="UTF-8"
	meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"
	title title
	= favicon_link_tag 'favicon.png'
	= csrf_meta_tags

	const select = document.querySelector('select');
	const valueFromSelectedOption = select.options[select.selectedIndex].value;

	console.log(valueFromSelectedOption); // => "2"