10 Steps to learn anything quickly — Vue.js

Using John Somnez technique to learn Vue.js

Step 1. Get the Big Picture

What is the high-level topic that you want to learn about?
Learn Vue.js

Briefly provide a summary of what your topic is about (the big picture.)
Vue.js is a JavaScript framework. It is one of three most popular frameworks: React, Angular and Vue

Break your high-level topic up into smaller subtopics or focus areas:

• Inline JavaScript in HTML. One component “app”
• Multiple components in single HTML
• Separate components in project tree
• Single Page Applications
• State management with Vuex
• Testing components
• Installing, deploying

Step 2. Determine the Scope

Time frame:
2 weeks
8 hours per day
2 x 5 x 8 = 80 hours total

Scoped Topic
What subtopic do you want to learn about?
Write Single Page Application

What do you plan on doing with the knowledge you will get from learning about this topic?
Use it in my workflow

Use the time frame, the subtopic, and what you will do with the knowledge to determine what will be your appropriately-scoped topic and write it here:
Write Vue frontend-application with Rails backend API

Step 3. Define Success

What specific actions does the knowledge you are trying to acquire allow you to do?

• Refactor existing web applications
• Write own Vue components
• Use existing components
• Write modular web applications
• Write Single Page Applications

Of the actions you listed above, which one or ones would be most valuable for you to be able to do?
Write Single Page Applications

Using this information, come up with a clearly-defined success criteria that you will use to determine when you have reached your goal.
I will have learned to create Single Page Applications when I write my own SPA

Step 4. Find Resources

Start with books, since books usually contain the most well-researched and organized information. Look for the best 5 or so books you can find on your topic and list them here.

• Vue.js: Up & Running
• Vue.js 2 Web Development Projects
• The Ultimate Vue JS 2 Developers Course

Now make a list of all the other resources you can think of.

• Vuejs.org
• Habrahabr.ru

Step 5. Create a Learning Plan

List the chapters from the table of contents or the sections or headers used to break up the material.

vuejs.org:

• Essentials
• Installation
• Introduction
• The Vue Instance
• Template Syntax
• Computed Properties and Watchers
• Class and Style Bindings
• Conditional Rendering
• List Rendering
• Event Handling
• Form Input Bindings
• Components
• Transitions & Animation
• Enter/Leave & List Transitions
• State Transitions
• Reusability & Composition
• Mixins
• Custom Directives
• Render Functions & JSX
• Plugins
• Filters
• Tooling
• Production Deployment
• Single File Components
• Unit Testing
• TypeScript Support
• Scaling Up
• Routing
• State Management
• Server-Side Rendering

Vue.js: Up & Running:

• Vue.js: The Basics
• Components in Vue.js
• Styling with Vue
• Render functions and JSX
• Client-side routing with vue-router
• State management with Vuex
• Testing Vue components

Take a look at what chapters or sections are repeated the most and write them down here:

• Installation
• Basics
• Components
• Transitions & Animation
• Rendering
• Routing
• Vuex
• Testing

Add any additional modules or sections that you think need to be added to your learning plan, but might not exist as distinct chapters or sections in your resources:

• Tools
• Deployment

From both of these lists, come up with the modules for your learning plan. Put them in the order that makes the most sense to you:

• Installation
• Basics
• Components
• Routing
• Tools
• Deployment

Step 6. Filter Resourses

What criteria do you think is the most important for judging the resources you will use for learning your topic? List the criteria you feel is most valuable to you here:

• Contains real examples
• Contains ground knowledge

Make your master list of resources here:

• Vue.js 2 Web Development Projects (for examples)
• vuejs.org (as reference)
• Vue.js: Up & Running (for ground knowledge)
• The Ultimate Vue JS 2 Developers Course (video tutorial)

Step 7. Learn Enough to Get Started

What is the general idea of this module in your learning plan?
To build working web application

What actions can you take to “play around” with what you are going to be learning for this module?
Take a look at some examples

Step 8. Play around

What specific things can you do to “play around” with the subject you are learning about?

• Install Vue.js
• Run sample code in HTML < script >
• Run CLI tools

Pick one of the things you can do and do it. Then list any questions you have as you are “playing around” here:

• How to use Vue.js inline in HTML?
• How to separate one file to SFC — Single File Components
• How to use CLI: vue, vue-webpack-server, vue-loader?
• What is Webpacker?
• What is Babel?
• What is YARN?
• What is MVVM?
• What is W3C Components?
• What is Vuex?

Step 9. Learn Enough to Do Something Useful

What are the most important questions you hope to find answers to during this step?

• How it works?
• How to use command line tools?
• How to put all components together?
• How to deploy Vue projects?
• How to transfer front-end projects written on Vue.js to Rails back-end?

Which questions are still unanswered after completing this step?

• How to implement Vue transitions and animation?
• How to use Vuex modules?
• How to deploy?
• How to implement server-side rendering with Rails?

What do you think would be an effective way to teach what you have learned in this step to someone else?

• To document all my actions
• To tell someone what I have learned
• To write in blog

What is the most important thing you have learned in this step?

• Custom HTML elements — are javascript objects, not HTML code
• Reactive features — is a process to work with Shadow DOM, render nodes and paste them to DOM
• All business logic put in Vuex!

Step 10. Teach

What methods of teaching do you find appeal to you the most? Do you like lectures, reading from books, watching videos, having a personal conversation, or something else?
Watch video course and write code by myself

What do you think would be the best way to present the material you have learned in this module of your learning plan?

• To document each step in README.md
• To have a conversation with coworkers

Based on the answers from these two questions, determine how you will teach the subject matter you have been learning about and write it down here.
I’ll write a documentation and do a conversation

After you have taught your subject, list anything you learned in the process that you had not realized or did not know before.