Skip to content

Instantly share code, notes, and snippets.

@buffalom

buffalom/vuejs-conference-amsterdam-2020.md

Last active July 4, 2022 15:39
Show Gist options
  • Save buffalom/60d17cf84c3e08ada8efead2c0d2d8bb to your computer and use it in GitHub Desktop.
Save buffalom/60d17cf84c3e08ada8efead2c0d2d8bb to your computer and use it in GitHub Desktop.
Download ZIP
My Takeaways from the Vue.js Conference 2020 in Amsterdam
Raw
vuejs-conference-amsterdam-2020.md

Vue.js Conference Amsterdam 2020

https://vuejs.amsterdam/

  • Talks
    • ⭐️State of Vuenion 2020
    • Scalable Vue Graphics
    • Vue Test Utils
    • ⭐️Vue 3 Composition API
    • ⭐️Composition API - Emerging Best Practices
    • Making eCommerce with VueStorefront and Composition API
    • Serverless Static Sites with Vue and Node.js
    • Climate Change and the Tech Community
    • ⭐️Application Shortcuts with Renderless Event Components
    • Content Loading that isn’t broken
    • Team First
    • ⭐️What is Nuxt 2020?
    • Deep Dive into Nuxt.js
    • ⭐️Animated Guide to Vue 3
    • Validations in Composition Age
    • Authentication from Scratch
    • ⭐️Test-Driven Development with Vue
    • Vuetify 2+
    • New Vue. New Compiler. Let’s unbox.
    • You might not need Vuex
    • ⭐️Vuex ORM
    • BootstrapVue - Road to 2.0 and beyond
    • Micro Fontends: composing a greater whole
    • ⭐️What you’ll love in Vue 3
    • Performant components through customization
    • ⭐️What’s new in Vue CLI UI
    • Vue-Router and its techniques
    • Building Blazing Fast Sites with Gridsome
    • Full Static with Nuxt
  • Other Noteworthy Things

Talks

⭐️State of Vuenion 2020

@youyuxi

New Composition API is technically completely optional but highly recommended. Composition API's setup function can be async.

Full TypeScript support, but can still be ignored and just used with plain JavaScript.

Full source map support to trace back errors in code.

VDOM has been incredibly optimized for performance. Check out the template explorer in the links section and play around.

3x faster SSR

Roadmap:

  • Currently Alpha
  • Beta in Q1
  • Release planned for Q1, likely Q2
    • More or less feature complete already but a lot of work has to be done regarding documentation and migration guides and tooling

Links

Scalable Vue Graphics

@dimshik100

Try using more svgs

Benefits:

  • Scalable
  • Media Queriable
  • Usable as Vue-Component with v-if, reactiveness, etc.

Links

Vue Test Utils

@_jessicasachs

Vue Test Utils Definition: Library of functions to ensure nice and fresh states for each test.

Use wrapper.vm to access actual vnode.

Links

⭐️Vue 3 Composition API

@greggpollack

Organize code by logical concern.

Links

⭐️Composition API - Emerging Best Practices

@linus_borg

Use ref(...) for reactive variables and access their value with .value. Use reactive(...) for reactive objects. Cannot be spread or it will lose it's reactivity. ref vs. reactive: If in doubt, use ref. Mainly for consistancy with .value. Generally just personal preference though.

Extracts code by logic into useFeature() functions. Also great for creating plugins.

Use Composition API with computed for readonly values.

Links

Making eCommerce with VueStorefront and Composition API

@filrakowski

Links

Serverless Static Sites with Vue and Node.js

@codebryo

Links

Climate Change and the Tech Community

@callumacrae

Make website more efficient and performant. Especially backend, since that's where the heavy stuff is done.

Use WebsiteCarbon to test websites. Use Google Lighthouse to check for unnecessary sources etc. Lazy load images

Links

⭐️Application Shortcuts with Renderless Event Components

@rahaug

Component to easily add global (not dom element specific) event handlers. (eg. keyboard shortcuts) Keyboard shortcut everything.

Links

Content Loading that isn't broken

@marialamardo

Use aria-live regions to announce non-interactive content changes. (eg. for screen readers)

  • aria-live
  • aria-current
  • tabindex (try not to use positive numbers, use dom oder instead)
  • aria-label

Links

Team First

@timbenniks

Assumption is the Mother of all Fuck-ups

So don't assume - Research, debug, ask and know

As a leader:

  • Trust your team
  • Growth - let people champion subjects

As a dev:

  • Failure is iteration - feel free to restart something
  • Helicopter view - step back and look at what’s in front of you

Links

⭐️What is Nuxt 2020?

@atinux

New fetch function (similar to asyncData but called after page/component is mounted)

  • $fetchState to track state of fetch function
  • can be used inside of components, not only in pages

mode: "universal" | "spa" becomes ssr: true | false and nuxt build --spa becomes nuxt build --no-ssr

Static generation new with target: "static" nuxt generate becomes two commands: nuxt build and nuxt export New Nuxt Crawler for dynamic routes so all the slug pages don't have to be listed. Crawler crawls all nuxt-links to find pages to render.

Links

Deep Dive into Nuxt.js

@pi0

Nuxt Functions, more advances serverMiddleware to extend server with simple logic.

  • functions/ directory, similar to pages (automatically mapped to a route based on filename)
  • Can be used for simple serverside tasks such as stripe transation processing, image resizing, pdf generation, etc.

Not fully understood how they will work. Mentioned benefit: Function will be called via http from clientside and as a function on serverside. AWS Lambda was mentioned in this context. Will those functions be truly separated and serverless out of the box with AWS Lambda?!

Links

⭐️Animated Guide to Vue 3

@sarah_edo

Sarah Drasner presented Vue 3 principles with amazing animations that will be added to the doc at some point.

Things necessary for something to be reactive:

  • Detect changes in a value
  • Track function that changes the value
  • Trigger the function again so it can update the final value

Proxy:

  • Have a getter get the original value to keep a single source of truth
  • Trap: Returning a value the user isn't expecting. (eg. statically return something)
  • Proxies are ES6 (previously Object.defineProperty)

Set

  • Array of unique items

Map

  • Unique key value pairs
  • Keep original order of items

Hydration

  • Deliver rendered HTML to client
  • Build VDOM from DOM to make existing, rendered elements dynamic.

Jamstack

Nuxt static and deploy to a CDN to have it globally spread.

  • Increases performance and security
  • Does not have to be only static, can call APIs as well

Links

Validations in Composition Age

@damiandulisz

VeeValidate is template base Vuelidate is model based (validations in validation function in script)

Several problems with Vuelidate until now Vuelidate v2.0:

  • Complete rewrite
  • Based on Vue 3
  • Lazy validation
  • Built in support for error messages

FormVueLatte

Schema based forms (construct forms with js objects) "Bring your own Components" approach

Links

Authentication from Scratch

@adamjahr

Usually libraries are used. In this case built from scratch using JWT (JSON Web Token) and Vue. Vue Side only

Flow:

  • Vuex action makes register/login HTTP-Request
  • Response is passed to mutation
  • Mutation stores userdata to state and localStorage and sets the axios Authorization header.

Links

⭐️Test-Driven Development with Vue

@frontstuff_io

Testing is one big pillar for robust software. Software is harder to refactor without tests.

TDD (Test-Driven Development) was popularized by Kent Beck.

Stages:

  • Red: Write specification for test and make sure it fails.
  • Green: Make test pass with the simplest, most stupid code possible. (even if it's just hardcoding something)
  • Refactor: Work on the actual implementation of the feature. Goal: Keep the test green.

Fixing issues is perfect. You know what you want, but not what you need. Write the specs.

Not sure about what to test? Ask yourself this: Does anyone care about this if it changes? If so, write tests.

Links

Vuetify 2+

@zeroskillz

Links

New Vue. New Compiler. Let's unbox.

@znck0

Two parts:

  • Template Compiler: Handles and converts render functions.
  • SFC Compiler (Single File Component)

You could use the data-test attribute to match elements in tests.

Transform functions are used to get compiled template ready for render functions. Multiple transforms can be used and custom transforms can be integrated.

Links

You might not need Vuex

@n_tepluhina

Needed when there's a shared state with:

  • Deep nested components
  • Independent components
  • Different routes

You can provide and inject state with reactive from composition api. Don't change data where it's injected.

If you use vue-apollo, use apollo cache for local state.

Links

⭐️Vuex ORM

@kiaking85

Laravel like models and access to vuex state.

Why would you ORM the store?

  • Prevent having same data in multiple places

"The recommended approach to managing relational or nested data in a Redux store is to treat a portion of your store as if it were a database" - Redux Documentation

Vuex ORM supports additional plugins. Official plugins are:

  • Vuex ORM Axios
  • Vuex ORM GraphQL
  • Vuex ORM Search (Fuse.js integration)
  • Vuex ORM Soft Delete
  • Vuex ORM Change Flags (IsDirty / IsNew flags)

Links

BootstrapVue - Road to 2.0 and beyond

@jackmu95

As a contributer:

  • Follow the contribution guidelines
  • Stay in contact with the maintainers and show your interest
  • Start small, even small contributions count
  • Be patient!

Links

Micro Fontends: composing a greater whole

@yanovskiyoav

Plugin example from vonage business cloud. Microservices in frontend? Frontend challenges:

  • Unified user experience
  • Small bundle size (backend doesn't really care)
  • Backend Microservices are autonomous, frontend isn't.
  • No standard library

Frontend microservices would be:

  • Independently deployed apps that work together in the browser.

Unified UX:

  • Shared CSS libraries for all devs
  • Shared components

Links

⭐️What you'll love in Vue 3

@hootlex

Reactively setting, deleting object props and pushing array items. Vue.set(this.object, index, value) becomes this.object[index] = value and still triggers reactivity.

Portals:

  • A portal-target elment needs an id
  • New portal component with target attribute

Usecases: Modals, Notifications, Popups, Layout content, etc.

v-model="foo" becomes v-model:foo="anyValue" Allows multiple v-models.

Composition API

Suspense is a new component used to have fallback content based on a condition.

Filters are removed, just make a function.

Other changes include:

  • Global mounting API change
  • Transparent wrappers are simplified
  • Slots unification
  • Optional props declaration
  • Transition as root

Why should you upgrade?

  • Performance
  • New features
  • Typescript support

Links

Performant components through customization

@mayashavin

A component library needs visual consistancy and functional consistancy. A good component library includes a design system.

Customizability (style guide):

  • Colors and themes
  • Typography
  • Paddings, margins, sizes
  • Icons

Template customization using slots instead of props.

Links

⭐️What's new in Vue CLI UI

@akryum

Why a GUI?

  • Easier to use
  • Self-explanatory
  • Richer interactions

gui.js is Guillaumes new Project to have GUIs for various framework CLIs:

  • An app natively installed instead of starting a webserver.
  • GUI for all kinds of CLIs (Nuxt, Vue, Vuetify, etc.)
  • Manage packages
  • Start scripts
  • Supports mono projects
  • No electron! Much more performant.

Links

Vue-Router and its techniques

@posva

Don't use router.push() with unencoded urls because vue-router will not change the url. Either use the encoded url or use an object with a route name.

How Browsers handle unencoded hashes:

![]

Vue-Router-Next:

  • Dynamic routing (programmatically add/remove routes)
  • Custom History
  • Better encoding defaults
  • Composition API
  • Navigation direction
  • Better TS support
  • Easier to contribute
  • More per-case documentation

Links

Building Blazing Fast Sites with Gridsome

@jakedohm

Gridsome is a Vue framework for building static sites. Write a Vue app and serve it pre-rendered at build time.

Make great user experience by making it easy to do for the devs.

Which framework should you use? (gridsome, nuxt, etc.) Evaluate all trade-offs of all frameworks to find the right one for you. (just use gridsome is what jake said eventually

Links

Full Static with Nuxt

@debs_obrien

"Gridsome or Nuxt, doens't matter. Just go static."

Nuxt static isn't just for blogs.

API's can still be consumed.

  • Forms
  • Headless CMS
  • Auth

Advantages:

  • Better performance
    • Not having a single point of origin server.
    • Fully static is much faster. API calls have latency - always takes longer.
  • No real server needed anyway, just a CDN. Cheaper and safer.
    • Reduces carbon footprint
  • You don't have to expose your API to the public.
  • You decide when to publish new content from your API by re-generating your website.
  • Better offline support
    • Payload files are cached and offline support with PWA.

Links

Other Noteworthy Things

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment