Contents 1 Introduction 1 1.1 WhatisHotwire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1.2 Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1.3 Whatisincluded. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1.4 Demo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1.5 Whatifyouhaveproblemorsuggestions . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1.6 Changelog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 2 CreateAproject 3 2.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 2.2 CreateDjangoProject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 2.3 Installpython-webpack-boilerplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 2.4 Runfrontendproject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 2.5 InstallTailwind . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 2.6 WriteTailwindCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.7 TestinDjangoTemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2.8 JIT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 2.9 SetupLiveReload . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 3 SetupTurbo 12 3.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 3.2 Turbo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 3.3 Preparation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 3.4 SetupTurbo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 3.5 Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 3.6 Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 4 CreateTaskApp 16 4.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 4.2 TasksApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 4.3 Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 4.4 Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 5 RenderDjangoFormwithTailwindCSSStyle 18 5.1 Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 5.2 DjangoApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 5.3 View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 5.4 Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 5.5 URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 5.6 Manualtest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 5.7 tailwindcss-forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 5.8 crispy-tailwind . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 5.9 JIT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 5.10 TestAgain . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 6 ExploreTurboDrive(PageNavigation) 27 6.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 i 6.2 ListPage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 6.3 AddNavBar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 6.4 HowTurboDriveWorks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 6.5 PageNavigationBasics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 6.6 SimpleTests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 7 ExploreTurboDrive(Cache) 31 7.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 7.2 turbo:before-cache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 7.3 data-turbo-cache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 7.4 turbo-cache-control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 7.5 ImprovePageNavigationStyle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 8 ExploreTurboDrive(Javascript,CSS) 35 8.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 8.2 WheretoputJavascriptbundle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 8.3 defer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 8.4 Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 8.5 ManualTest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 8.6 DOMContentLoaded . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 8.7 HandleScriptin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 8.8 HandleScriptin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 8.9 AutoReloadonAssetsChange . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 8.10 InlineScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 9 ExploreTurboDrive(3-partyJavascript) 41 9.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 9.2 Problem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 9.3 Whydidithappen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 9.4 Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 10 TurboDriveandDjangoformvalidation 43 10.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 10.2 DjangoFormValidation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 10.3 View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 10.4 RedirectAfterFormSubmission . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 10.5 Workflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 10.6 UnprocessableEntity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 11 PreparetolearnTurboFrame 47 11.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 11.2 DjangoApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 11.3 View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 11.4 Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 11.5 Frontend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 11.6 URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 11.7 Manualtest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 12 TurboFrameBasics 55 12.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 12.2 WhatisTurboFrame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 12.3 SimpleExample . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 12.4 AddTurboFrame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 12.5 Notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 13 TurboFrameandDjangoForm 60 13.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 13.2 LoadDjangoForminTurboFrame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 13.3 Formaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 ii 13.4 Formresponse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 13.5 Installdjango-turbo-response . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 13.6 ReturnTurboResponseusingdjango-turbo-response . . . . . . . . . . . . . . . . . . . . . 64 13.7 FixFormonthestandardpage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 14 InlineEditingwithTurboFrames 67 14.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 14.2 Detail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 14.3 Edit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 14.4 Delete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 14.5 ManualTest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 15 PrepareDjangoapptolearnStimulusBasics 71 15.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 15.2 DjangoApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 15.3 View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 15.4 Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 15.5 Frontend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 15.6 URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 15.7 Manualtest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 16 StimulusControllerBasics 75 16.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 16.2 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 16.3 InstallStimulus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 16.4 FirstStimulusController . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 16.5 RegisterController . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 16.6 Howtousethecontroller. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 16.7 Workflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 16.8 AutoLoadingControllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 17 StimulusController(Actions,Values) 79 17.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 17.2 ControllerInstanceState . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 17.3 Getter,Setter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 17.4 StimulusValues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 17.5 Actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 18 StimulusController(Targets,CSSclasses) 84 18.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 18.2 Improvestyle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 18.3 Target . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 18.4 MultipleTarget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 18.5 CSSclasses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 18.6 Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 19 StimulusController(Lifecycle) 90 19.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 19.2 LoadpagecontentwithTurboFrame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 19.3 ManualTest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 19.4 LifecycleCallback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 19.5 initializevsconnect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 19.6 PageCache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 20 StimulusController(3-partyResources) 96 20.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 20.2 Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 20.3 StimulusController . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 20.4 ManualTest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 iii 20.5 ContentLoader . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 21 StimulusController(DatePicker) 99 21.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 21.2 Preparation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 21.3 Frontend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 21.4 ManualTest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 21.5 CustomFormWidget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 21.6 Flatpickr . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 21.7 Notes: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 22 StimulusController(FormSubmission) 105 22.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 22.2 Workflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 22.3 Spinner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 22.4 FormController . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 22.5 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 22.6 Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 23 PrepareDjangoapptolearnStimulusandTurboFrame 110 23.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 23.2 DjangoApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 23.3 View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 23.4 Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 23.5 Frontend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 23.6 URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 23.7 Manualtest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 24 StimulusController(FlashMessage) 118 24.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 24.2 tailwindcss-stimulus-components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 24.3 View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 24.4 MESSAGE_TAGS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 24.5 Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 24.6 URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 24.7 Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 24.8 Notes: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 25 BuildStimulusControllerforModal 123 25.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 25.2 View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 25.3 Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 25.4 Frontend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 25.5 ManualTest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 25.6 MakeTailwindJITworkwith3-partynpmpackage . . . . . . . . . . . . . . . . . . . . . . 126 26 LoadFormintheModal 128 26.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 26.2 ExtendModalController . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 26.3 Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 26.4 ManualTest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 26.5 Lazy-loadedframe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 26.6 TurboFrame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 27 HandleFormSubmissioninModal 133 27.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 27.2 ManualTest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 27.3 CloseModalAftersuccessfulformsubmission . . . . . . . . . . . . . . . . . . . . . . . . 135 27.4 Asyncmethod . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 iv 28 FullPageRedirectinModal 137 28.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 28.2 Problem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 28.3 Solution1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 28.4 Solution2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 29 CommunicationAmongStimulusControllersViaEvents 140 29.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 29.2 Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 29.3 Preparation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 29.4 Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 29.5 SendMessagefromChildtoParent. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 29.6 SendMessagefromParenttoChild. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 30 PrepareDjangoapptolearnStimulusStream 148 30.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 30.2 DjangoApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 30.3 View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 30.4 Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 30.5 Frontend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 30.6 URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 30.7 Manualtest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 31 ImportTurboFrame 156 31.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 31.2 IndexPage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 31.3 LoadDjangoForminTurboFrame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 31.4 ReturnTurboFrame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 31.5 Question . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 32 TurboStreamBasics 161 32.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 32.2 WhatisTurboStream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 32.3 SimpleTest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 32.4 Message . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 32.5 text/vnd.turbo-stream.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164 32.6 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 33 UseTurboStreamtoimproveinlineediting 166 33.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166 33.2 ListPage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166 33.3 DetailPage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 33.4 EditPage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 33.5 DeletePage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 33.6 ManualTest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170 34 FilteringontheListPage 171 34.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 34.2 Filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 34.3 Pagination . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172 34.4 TurboFrame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 34.5 LoadingOpacity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176 35 AutoSearch 177 35.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 35.2 Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 35.3 Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 35.4 Problem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 35.5 TurboStreamHeader . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 v 35.6 View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180 36 RealTimeUpdatebasedonWebsocket(Part1) 181 36.1 Websocket . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 36.2 Redis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 36.3 django-channels. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 36.4 Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 36.5 StimulusController . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 36.6 Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 37 RealTimeUpdatebasedonWebsocket(Part2) 188 37.1 SignalReceiver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 37.2 Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 37.3 ReconnectingWebSocket . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 37.4 Notes: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 37.5 Ifyouwanttodivedeeper: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190 38 NextSteps 191 38.1 LearningResources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 38.2 MyNextStep . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 38.3 ThankYou . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 vi Chapter 1 Introduction 1.1 What is Hotwire Hotwire(HTMLOVERTHEWIRE)isanalternativeapproachtobuildingmodernwebapplicationswithout usingmuchJavaScriptbysendingHTMLinsteadofJSONoverthewire. 1. ItisbuiltbyBasecamp(itpowerstheHEYemailservice). 2. Ithasahealthyecosystem,andtherearemanyrelevantprojects,tutorialsaboutit. 3. IthasbecomethedefaultfrontendsolutionsinRails. 4. ItisalsoverypopularinthePHPcommunity(Laravel,Symfony). 1.2 Objectives ThisbookwillhelpyoutolearnHotwirewithDjangoinsystematicway. Bytheendofthisbook,youwillbeableto: 1. LearnHowtwireincludesTurboandStimulus,andwhatproblemtheycanhelpsolve. 2. JumpstartfrontendprojectbundledbyWebpack. 3. SetupTurboandStimulus. 4. LearnhowpagenavigationworksinTurbo Drive 5. UnderstandwhatiscacheinTurboDriveandhowpreviewworks. 6. LearnwhatisTurbo Frameandhowitworks. 7. BuildInline EditingfeaturewithTurbo Frame. 8. LearnwhatisStimulusandhowStimulus Controllerwork. 9. WhatisStimulusValues,Targes,andActions 10. UseStimulustobuildaDatetimepickerandimproveformsubmissionprocess. 11. UnderstandhowtouseeventstodocommunicationamongStimuluscontrollers 12. BuildType as searchfeaturewithStimulus,TurboandDjango. 13. LearnwhatisTurbo Streamandhowitworks. 14. HowtobuildCollaborative EditingbasedonWebsocketandTurbo Stream WithHotwire,wecanbringSPA-like experiencetoourDjangowebapp: 1 DefinitiveGuidetoHotwireandDjango,Release1.0.0 1. WedoNOTneedheavyfrontendsolutionsuchasReact,Vue 2. WedoNOTneedJSONandDjangoRESTframework 3. WewilluseDjangoform,Djangotemplatesandtheystillrock. 1.3 What is included 1. APDFebookwhichcontainsabout40chapters. 2. Thesourcecodeoftheproject. 1.4 Demo Thedemoisavailableonhttp://hotwire-django.herokuapp.com/ 1.5 What if you have problem or suggestions Ifyoumeetproblem,pleasecheckFAQfirst(youcanfinditattheendofthebook) Ifyouwanttotalkwithme,pleasesendemailto [email protected] 1.6 Changelog 1.6.1 1.0.0 • 2022-05-27: Published • 2022-05-25: Reviewfinished • 2022-02-15: Draftversionfinished • 2021-12-23: Startedwriting 2 Chapter1. Introduction Chapter 2 Create A project 2.1 Objective 1. CreateADjangoproject 2. Usepython-webpack-boilerplatetojumpstartfrontendprojectbundledbyWebpack. 3. ImportTailwindCSSasstylesolution. 4. SetupLiveReloadwithwebpack-dev-server 2.2 Create Django Project IrecommendtousePython3.9+ $ mkdir hotwire_django_project && cd hotwire_django_project $ python3 -V Python 3.9.9 # create virtualenv $ python3 -m venv venv $ source venv/bin/activate YoucanalsouseothertoolssuchasPoetry1orPipenv2 Createrequirements.txt django==3.2 (venv)$ pip install -r requirements.txt (venv)$ django-admin.py startproject hotwire_django_app . Youwillseestructurelikethis . ├── hotwire_django_app ├── env ├── manage.py └── requirements.txt Now,let’sgettheprojectrunningonlocalenv. 1https://python-poetry.org/ 2https://pipenv.pypa.io/ 3