Vuejs: Difference between revisions

From Training Material
Jump to navigation Jump to search
Line 92: Line 92:


== Dividing the application into smaller, self-contained components ==
== Dividing the application into smaller, self-contained components ==
* '''Component Pattern''' instead of '''MVC'''
* Constructs
** '''Interpolation''', '''expressions''', '''data binding''' syntax
* Change detection
* Web components
<!--
==== Component pattern ⌘====
* In general, involves combining smaller, discrete building blocks into larger finished products
* In software development, '''logical units''' that can be combined into '''larger applications'''
** Tend to have '''internal logic''' and properties that are '''shielded''' or '''hidden''' from the larger application
** The larger application consumes these building-blocks through specific '''gateways''' (interfaces)
*** That expose only what is needed to make use of the component
** Component's internal logic can be modified '''without affecting''' the larger application
*** As long as the '''interfaces''' are not changed
==== Component pattern Con't ⌘====
In web applications
* No messes of spaghetti code in applications
* Reasoning about specific parts of the application in '''isolation''' from the other parts
* Maintenance costs are less
** Each component's '''internal logic''' can be managed '''separately'''
** No affecting the other parts of the application
* '''Self-describing''' components
** Makes the application easier to understand at a higher level of abstraction
==== Constructs ⌘====
* Usually they live in the HTML template that is inside the ''@Component'' '''decorator'''
* They are '''linking''' the view HTML and component code
* Similar to standard HTML with new symbols:<syntaxhighlight lang="js">
[ ] property bindings
( ) event bindings
{{ }} interpolation
</syntaxhighlight>
==== Interpolation ⌘====
* Replaces the content of the '''markup''' with the value of the expression ('''howManyTries''')
** The value of the component property will be displayed as the contents inside the interpolation tags
* Declaration syntax:<syntaxhighlight inline lang="js">{{expression}}</syntaxhighlight>
** Similar to a JavaScript expression
** Is always evaluated in the '''context''' of the component
** Interpolation tags read the value of the property directly from the component without any need for additional code
* Changes made to component properties are '''automatically synchronized''' with the view
** '''Easier debugging''' when we need to see the '''state''' of the model
** No need to put a breakpoint in code for the value of a component property or method call
* [[Angular_Fundamentals#Example_1_.E2.8C.98|Example]]
<syntaxhighlight lang="html">
<p class="text-info">No of tries :
  <span class="badge">{{howManyTries}}</span>
</p>
</syntaxhighlight>
==== Expressions ⌘====
* Pieces of plain JavaScript code
** Evaluated in the '''context''' of the component '''instance'''
** '''Associated''' with the '''template''' instance in which they are used
* Should be kept '''simple''' (readability)
** When become complex, should be moved into a method in the component
* New meanings for operators '''|''' and '''?.'''
==== Expressions Con't ⌘====
Restrictions
* ''Assignment'' is prohibited, except in event bindings
* The ''new'' operator is prohibited
* ''++, -- and bitwise'' operators are not supported
* '''No referring''' to anything in the ''global namespace''
* No referring to a ''window'' or ''document''
* No calling ''console.log''
===== Safe navigation operator ⌘=====
'''?.''' checks for null values in lengthy property paths
* Example <syntaxhighlight inline lang="js">{{ invoice?.item }}</syntaxhighlight>
** If ''null'' value (invoice), it stops processing the path
** But lets the application '''continue running'''
* Good for data loaded ''asynchronously''
** Because it might not be immediately available to the view
* Prevents the application from crashing
** Loads the data when it is available
==== Binding data ⌘====
[[File:BindingDataAng4a.png|320px|Binding data in Angular]]
* Property binding
* Event binding
* [[Angular_Fundamentals#Example_1_.E2.8C.98|Example]]
===== Property binding ⌘=====
<syntaxhighlight inline lang="js">[ ]</syntaxhighlight>
* Binding works by '''linking''' the value of the property in '''component class''' to the value of some '''element in the view'''
* The binding is '''dynamic'''
** As the value of the property changes
** The value of the element will be synchronized to the same value
** No need to write any code to do that
<syntaxhighlight lang="html">
<input type="text" [value]="findJewel" (input)="findJewel = $event.target.value" />
</syntaxhighlight>
===== Event binding ⌘=====
<syntaxhighlight inline lang="js">( )</syntaxhighlight>
* Event of element is '''bound''' to an expression
* The expression sets the property in component class to '''$event.target.value'''
** The value being entered by the user
* Angular sets up an '''event handler''' for the event that we are binding to
<syntaxhighlight lang="html">
<button (click)="verifyTheTry()" class="btn btn-primary btn-sm">Verify</button>
<button (click)="initializeGame()" class="btn btn-warning btn-sm">Restart</button>
</syntaxhighlight>
==== Change detection ⌘====
* State maintenance
* Change detection
===== State maintenance ⌘=====
* Vue apps are ''dynamic''
* Dynamic values are kept up-to-date as the data in an application gets updated
* Component is the ''container'' for the '''state'''
** all the properties in the component instance and their values are available for the template instance that is referenced in the component
** we can use these values directly in expressions and bindings in the template without having to write any plumbing code to wire them up
===== Change detection ⌘=====
Angular keeps '''track of changes''' in the component as it runs
* Is reacting to events in the application
* Uses '''change detectors'''
** Go through every component to determine whether anything has changed that affects the view
** Event triggers the '''change detection cycle'''
*** Identifies that the property that is being used in the view has changed
** Updates the element in the view that is bound to property with the new value of it
===== Change detection Con't ⌘=====
* Multi-step process where Angular
** First updates the '''components''' and domain objects in response to an event
** Then runs change detection
** Lastly '''re-renders''' elements in the '''view''' that have changed
* This is done on every browser event
** Also other asynchronous events (XHR requests, timers, etc)
* '''one-way data binding'''
** Change detection in Angular is '''reactive''' and '''one way'''
** Makes just one pass through the change detection graph
** It vastly improves the '''performance''' of Angular
=== Web components ⌘===
Standards for web browsers
* Custom elements
* Shadow DOM
* Templates
* HTML imports
==== Custom elements ⌘====
Enable '''new types of element''' to be created
* Other than the standard HTML tag names (div, p, etc)
* '''Custom tags''' provides a location on the screen that can be reserved for '''binding a component'''
* '''Separation''' of component from the rest of the page
** Makes it possible to become truly '''self-contained'''
==== Shadow DOM ⌘====
Provides a '''hidden''' area on the page for scripts, CSS, and HTML
* Markup and styles in it
** Will not affect the rest of the page
** Will not be affected by the markup and styles on other parts of the page
* Component can use it to '''render''' its display
==== Templates ⌘====
'''Repeatable''' chunks of HTML
* Have ''tags'' that can be replaced with dynamic content at '''runtime''' using JavaScript
* Web Components standardize templating
** Provide direct support for it in the browser
* Can be used to make the HTML and CSS inside the Shadow DOM used by the component ''dynamic''
==== HTML imports ⌘====
Provide a way to '''load''' resources (HTML, CSS, JS) in a '''single bundle'''
* Angular does not use HTML imports
** It relies on JavaScript '''module loading''' instead
-->


== Methods and computed properties ==
== Methods and computed properties ==

Revision as of 09:58, 13 May 2024

Category:JavaScript


Vuejs

Vuejs Training Materials

Introduction

  • JavaScript framework for building UI (user interfaces)
  • What do we need?
    • HTML, CSS, and JavaScript
  • Declarative, component-based programming model
    • Declarative rendering
    • Reactivity
  • Progressive framework
  • Single-file components (SFC)
  • API Styles - options VS composition

Not That

NotVue.png

BUT still - we'll have a lot to see! (-'

Framework

Progressive Framework - "framework that can grow with you and adapt to your needs"

  • framework and ecosystem
  • designed to be flexible and incrementally adoptable
  • can be used in
    • enhancing static HTML without a build step
    • embedding as Web Components on any page
    • Single-Page Application (SPA)
    • Fullstack / Server-Side Rendering (SSR)
    • Jamstack / Static Site Generation (SSG)
    • targeting desktop, mobile, WebGL, and even the terminal

Overview of Vue JS

  • Declarative rendering
  • Component composition
  • Hot-reloading
  • Time-travel debugging

Declarative rendering

Component composition

Hot-reloading

Time-travel debugging

Setting up a development environment

vue itself

npm create vue@latest

Creating your first application

Build game "Find the jewel".
The objective of the game is to find a random computer-chosen jewel in as few tries as possible.

Approach:
* First think about the functionality we want to offer
* Second think about the data and behavior that can support the functionality
* Third think about how to build a user interface for it

Test it with 'live-server' (if not yet installed in the training machine, run 'sudo npm i -g live-server')
* in command line go to application's root folder and execute the command 'live-server --cors'
  1. Designing the component
    • Detailing the features that we want the app to support
      • Choosing random jewel (origJewel)
      • Providing input for a user to find the jewel (findJewel)
      • Tracking the number of tries already made (howManyTries)
      • Giving the user hints to improve their try based on their input (hinting)
      • Giving a success message if the user found the proper jewel (hinting)
    • Determining what we need to display to the user and what data we need to track
      • Names in round brackets above are the properties that will support those features
      • We need to include these properties in our component

Working with Templates

Dividing the application into smaller, self-contained components

  • Component Pattern instead of MVC
  • Constructs
    • Interpolation, expressions, data binding syntax
  • Change detection
  • Web components


Methods and computed properties

Reactive programming

Directives and data rendering

Applying transitions

Routing

Managing state

Creating animations

Refactoring components

Server-side rendering

Supporting libraries and packages

  • Routing
  • State management
  • Build tooling

Routing

State management

Build tooling

Testing your application

Debugging and performance

Embedding Vue.js into existing pages

Deploying your application to production Vue-CLI

  • Vite as a replacement for Vue-CLI
    • npm run dev
    • npm run build
    • interactive CLI commands:
press r + enter to restart the server
press u + enter to show server url
press o + enter to open in browser
press c + enter to clear console
press q + enter to quit

Scaling your application

Helpers

Retrieved from ‘https://training-course-material.com/index.php?title=Vuejs&oldid=87949’