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 :

	ZSH=$HOME/.oh-my-zsh
	ZSH_THEME="robbyrussell"
	plugins=(git gitfast last-working-dir common-aliases zsh-syntax-highlighting history-substring-search)

	# Disable warning about insecure completion-dependent directories
	ZSH_DISABLE_COMPFIX=true

	# Actually load Oh-My-Zsh
	source "${ZSH}/oh-my-zsh.sh"
	unalias rm # No interactive rm by default (brought by plugins/common-aliases)

	/ 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

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

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