Bryan Lim and Richard LaFranchi

Vue on Rails

End-to-End Guide to Building Web Apps Using Vue.js and Rails

Bryan Lim
Singapore, Singapore
Richard LaFranchi
Boulder, CO, USA
ISBN 978-1-4842-5115-7e-ISBN 978-1-4842-5116-4
https://doi.org/10.1007/978-1-4842-5116-4
© Bryan Lim and Richard LaFranchi 2019
This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed.
Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein.
Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail [email protected], or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation.

To Chloé, future engineer.

—Richard

About the Technical Reviewer

Matt is a Senior Software Engineer from Germany, interested in thoughtful software concepts with a sense of joy and elegance and a beautiful design under the hood. In the last decade of his professional career, he saw many questionable solutions inside enterprises. Vue.js and Rails are different frameworks with the special power of supportive and helpful communities behind. You can follow him on his Github or Twitter (@m5o).

Acknowledgments
The authors would like to recognize all developers and engineers who have committed their time to supporting open source software. The list is vast, but the most notable in the Vue and Rails communities are listed here:

  • Evan You – Vue creator

  • Yukihiro Matsumoto – Ruby creator

  • David Heinemeier Hansson (DHH) – Ruby on Rails creator

  • Aaron Patterson – Ruby on Rails core team

  • Sarah Drasner – Vue core team

  • Chris Fritz – Vue core team

Table of Contents

Part I: Start Your Engines – The Technology1
Chapter 1:​ Introduction 3
Getting Started 3
Hello Vue 4
Hello Vue on Rails 5
Our Motivation from the Beginning 6
Who Should Read This Book?​ 7
Objectives of This Book 7
When the Price Is Right 8
Resources:​ Framework Versions, Downloads, Tutorials, and More 9
Tool Versions and Source Code 9
Cheatsheets 10
Useful Resources for Vue on Rails Projects 10
Tools for Visual Studio 11
Tools for VS Code 12
Tools for Atom Editor and Sublime Text 13
Who to Follow?​ 13
Getting Your Priorities Right:​ Vue First vs.​ Rails First 14
Healthy Tradeoff – The Right Price 16
Failing the Single-Page Application Litmus Test 17
KPI – Keeping Programmer Insanely Happy 17
Wrap-up and the Next Step 18
Chapter 2:​ Nuts and Bolts of Vue on Rails 19
Attributes of a Modern Web App 19
What Are the Attributes of a Modern Web App?​ 20
Inherent Nature of Vue.​js 20
The Goodness Test 21
Asset Management 22
Tools 22
Should You Remove Your Old Pipe?​ 23
Getting Started with Webpacker 24
Scaffolding Vue on Rails Projects 25
Rails First Approach:​ Putting Ruby on Rails before Vue 27
The Yes/​No Answering Robot – Version 1 27
Evaluating the Rails-Only Approach 29
Vue First Approach:​ Putting Vue before Ruby on Rails 30
The Yes/​No Answering Robot – Version 2 30
Evaluating the Vue-First Approach 33
A Good Balance:​ Vue as a First-Class Citizen of Rails 34
The Yes/​No Answering Robot – Version 3 35
Creating Version 3 36
Evaluating the Vue as a First-Class Citizen of Rails Approach 37
Reusability:​ A Powerful Proposition of the Vue Component 38
Reactivity:​ Data-Binding and Virtual DOM of Vue 39
Wrap-up and the Next Step 39
Chapter 3:​ Model, Vue, and Controller 41
The Vue Instance and Other Vue Properties 41
The Vue Lifecycle 42
el – The Main Selector of a Vue Instance 44
Props vs.​ Data 45
Data 46
Directives 47
@click – The Method Invoker 48
Computed Properties, Watchers, and Methods 48
Class and Style Binding 50
Plugins 51
Mixins 52
Building Vue Components 53
Generating Vue Components for Your Vue on Rails Project 53
Using x-template to Load Your Vue Component 54
Communication Between Vue Components in a Rails Project 56
Registering Components 60
Passing Data from Vue to Server 60
With HTTP Client 62
Routing with Vue Router within a Rails Project 64
Creating the Router File 65
Initializing vue-router 66
Using <router-link> 67
Routing Parameters 68
Redirect or Alert 69
Points to Ponder 71
Managing State of a Rails View Using Vuex 71
Introduction 72
The Trouble with Vuex and Other State Management Tools 72
Why Should We Manage States?​ 72
Getting Started with Vuex 73
Vuex Rails Plugin 74
Passing Data from Server to Vue 76
Using Action Cable as a push technology 77
A Simple Polling 78
Wrap-up and the Next Step 79
Part II: Hands on the Wheels – Tutorials81
Chapter 4:​ Real-World Applications Through Short Tutorials 83
Specific-Page Vue Inside Rails Products 84
Specific-Page Vue 86
Specific-Page Vue with Turbolinks 89
Nested Form with form-for Component 90
Application Template of Vue on Rails Products 94
The Template 94
Options of Vue on Rails Application Template 95
Vue UI Compatibility in Rails Products 97
Manual Enabling of Vue UI in Rails Products 99
Server-Side Rendering of Vue Components in Rails Products 100
Scaffolding SSR Components in Rails Products 101
Manual Configuration of SSR Vue Components in Rails Products 103
Internationaliza​tion 105
Using Vue on Rails 118n 107
Simple State Management of Vue Components Inside Rails Products 110
Simple State Example 111
Scaffolding Simple State Management in Vue on Rails 112
Wrap-up and the Next Step 113
Chapter 5:​ Making a Real-Time Two-Player Game with Action Cable 115
Domain 117
The GameChannel 118
The Controllers 119
Listing Games 121
Creating a Game 122
Game Time 123
Joining a Game 125
Drawing the Tic Tac Toe Board 125
Placing a Piece 130
Accessing Action Cable from Vue 131
Wrap-up and the Next Step 132
Chapter 6:​ Building an Image-Cropping Tool with Vue and Active Storage 135
The Avatar 136
The User Profile 137
Vue Cropper Component 139
Loading the Image 144
Panning the Image 146
Scaling the Image 147
ImageMagick Processing 149
Wrap-up and the Next Step 151
Part III: Turbo Charge – Production Ready153
Chapter 7:​ Testing, Deployment, and Troubleshooting 155
Testing Approaches 155
TDD – To Drive or Not to Drive?​ 156
What about RSpec and BDD?​ 157
General Testing Guidelines 157
System Tests 158
Vue Test Utilities and Jest 160
Heroku – The Ninja Deployment 165
Heroku vs.​ Virtual Private Server 166
Continuous Integration and Deployment 167
Troubleshooting Common Issues of Vue on Rails 173
Wrap-up and the Final Step 182
Chapter 8:​ Conclusion – Finishing the Race 183
Vue is Not Without Guilt 184
Ruby on Rails Isn’t the Top in Class Either 185
Where Do You Go from Here?​ 185
Appendix A:​ The MIT License (MIT) for vuejs.​org Content Used in This Book 187
Index 189

About the Authors

Bryan Lim

is a web developer and contributor to open source projects like Webpacker and Vue on Rails project. He has a bachelor’s degree in computing and a master’s degree in business analytics from National University of Singapore. He also runs a Singapore-based software consultancy firm called Tada. You may find his Vue components, Rubygems and other open-source work on his personal website ( ytbryan.​com ) and his Github (@ytbryan).

 
Richard LaFranchi

is a Senior Software Engineer at Charter Communications and works on internal testing tools for the organization. He has a bachelor’s degree in civil engineering from the University of Colorado, Boulder, and is currently pursuing a master’s in computer science at Colorado State University. He first developed a passion for web development in 2011, and he publishes many Vue/Rails open source tutorials and projects on his GitHub (@rlafranchi).

 
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.141.199.243