Your Choice JavaScript News

Vue News Saturday, May 12 React app, Contact form, Service workers & more…


What’s new?

  • End-to-end testing React apps with Puppeteer andJestIn this tutorial, well see how to write tests for a React app using Jest and Puppeteer.
  • Write thetestsTo start off with the tests, well first write a test to check if theres a particular text on a page and also a test to see if a contact form submits successfully.
  • More testing!For the next test, well simulate and test submitting a contact form on the React app.
  • For the next set of tests, well write tests to assert the following: – Users can login – Users can logout – Users are redirected to the login page for unauthorized view – Nonexistent views/route returns a 404 page – The tests above are end to end tests that are…
  • In the test suite, the browser is directed to the login page which is routes.public.login and just like the contact form test, puppeteer is used to fill the form and submit it.

Tags: React app, tests, contact form, puppeteer, test


  • In a few words, we are going to learn: – What a Service Worker is and how it can offer offline experience;How to cache your application App Shell (core js and css);How to cache your HTTP requests (external assets, cat pictures,…);How to cache Firebase stream.Enjoy reading!
  • A Service Worker executes code even when your application is closed or inactive, and opens the way to app-like features such as caching (using Cache Storage API and Fetch API), push notifications (using Push API) or background sync.
  • To test it, build Cropchat in production mode: – npm run buildIn order to emulate an HTTP server and serve Cropchat built files, you can use brilliant serve tool: (requires node 6.9.0) – sudo npm install -g serveTthen, let the magic happen: – serve dist/And browse: http://localhost:3000 – Press F12…
  • Here is what they look like: – Chrome Developer Tools: Network tab gives us CropChat images urlslistUpdate serve your application again (unregister your Service Worker or/and close Chrome if needed), activate offline mode and test it again: – – CropChat is now available offline!
  • We learned: – how to use sw-precache to cache App Shell files;how to user sw-toolbox through runtimeCaching to cache external assets;how to handle Firebase websockets caching using browsers local storage.Lets have a look to our Progressive Web App checklist: – Two of our requirements are not yet met.

Tags: Service Workers, Progressive Web App, Service Worker, offline mode, app shell


  • Creating Multi-root Vue.js ComponentsA common constraint in component-based frameworks like Vue.js is that each component has to have a single root element.
  • This means that everything in a particular component has to descend from a single element, like this: – template – div !
  • The CodeFor simplicity, I wrote each of my paired td elements as its own single-file component, and then simply wrapped them in a functional component that passed along props to both of them.
  • js */ – import FirstCell from SecondCell from export default { – functional: true, – props: [‘person’, ‘place’, ‘thing’], – render(createElement, context) { – const first = createElement(FirstCell, { props: context.props }); – const second = createElement(SecondCell, { props: context.props }); – return [first, second]; – }, – };FirstCell and…
  • Functional components are stateless (They contain no data of their own, and thus their outputs are solely defined by props passed in.Functional components are instanceless, meaning there is no this context, instead props and related values are passed in via a context object.Looking at what the code is doing then,…

Tags: single root element, template rendering mechanism, component, abstract syntax tree, pure JavaScript file


  • We are going to: – Setup a new Firebase database;Connect our Vue App to Firebase with Vuefire;Post and retrieve pictures from Firebase.CropChat with freshdata[PART 2] A Realtime PWA withFirebaseFirebase is a NoSQL Realtime Database developped by Google.
  • Vuefire: release the power of Firebase +VueJSConfigure VueFireWe will use VueFire, a node package built to wrap firebase hooks in a vueJS application.
  • js: – We just created a hook between our app prop cats and the firebase node cats.
  • Open an second tab with the app, post a cat, and see the magic happening: – Hot-syncedUpdate the detailviewAdd lodash: – npm install lodash –saveAnd update hope I have convinced you of the capabilities of Firebase and VueJS to improve your app with fast and fresh datas.
  • To cut a long story short: – Vuefire offers an quick way to integrate a Firebase Database in your VueJS app;Firebase is a very powerfull tool for creating a real time data in an app, and make sure that your users always have fresh and up-to-date data.We checked a new…

Tags: firebase, Firebase Console, Firebase package, firebase hooks, Firebase instance


  • While it is true the Vue.js core is just a view layer library, there are in fact a collection of tools that will enable you to build full-blown, large-scale SPAs (Single Page Applications) using Vue.js with a pleasant development experience.
  • The Building Blocks – For a Vue.js-based SPA, here are the tools and libraries that we will use to fill in these gaps: – – – – View Layer: Vue.js, of course 🙂 – – – – Routing: vue-router, the official router for Vue.js.
  • Build Tool: Webpack + vue-loader for modules, hot-reloading, ES2015, pre-processors and most importantly, single-file Vue components.
  • The core concept when using Vue.js for large SPAs is dividing your application into many nested, self-contained components.
  • By treating everything for your frontend including HTML, CSS and even image files as module dependencies that can be arbitrarily transformed during the bundling process, Webpack actually covers most of the build tasks that you will encounter when building a SPA.

Tags: traditional backend-rendered app, nested Vue components, Single Page Applications, view layer library, pleasant development experience


Top Vue Courses

Vue JS 2: From Beginner to Professional (includes Vuex) (1,798 students enrolled)

By Bo Andersen
  • How to build advanced Vue.js applications
  • How to build single page applications (SPA)
  • Understand the theory and how Vue works under the hood
  • How to manage state in large applications with Vuex
  • Communicating with servers with HTTP
  • Use modern tools for developing and building applications (e.g. webpack)

Learn more.


Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) (38,295 students enrolled)

By Maximilian Schwarzmüller
  • Build amazing Vue.js Applications - all the Way from Small and Simple Ones up to Large Enterprise-level Ones
  • Understand the Theory behind Vue.js and use it in Real Projects
  • Leverage Vue.js in both Multi- and Single-Page-Applications (MPAs and SPAs)

Learn more.


The Ultimate Vue JS 2 Developers Course (3,882 students enrolled)

By Anthony Gore
  • Understand all Vue concepts from beginner to advanced
  • Build three real world applications using Vue.js utilising every Vue feature
  • Use the Vuex statement management library
  • Write basic Vue with ES5 and also modern Vue with ES6
  • Setup VueJS environment with development tools including Webpack
  • Create a universal application with server-side rendering
  • Use popular plugins from the Vue ecosystem like vue-router and vue-resource
  • Cutting-edge features like Single File Components, Render functions and Server-Side Rendering

Learn more.


Vue JS 2.0 - Mastering Web Apps (52,495 students enrolled)

By David Katz
  • Build entire Vue JS, VueRouter, and Vuex applications from scratch.
  • Develop apps that deal with APIs and web requests.
  • Create web apps with a full authentication service, and real-time database.

Learn more.


Learn by Doing: Vue JS 2.0 the Right Way (1,437 students enrolled)

By Dejan Stošić
  • Build your own VueJS application of any size
  • Plan and structure your project
  • Write maintainable code
  • Use smart development tools like vue-cli

Learn more.