Episode 6 - WebApp Prototyping with Nuxt.js & Vue.js

Welcome back to a new episode of our Rock the Prototype Podcast. I'm Sascha Block, IT architect in Hamburg and host of the Rock the Prototype Podcast.

I am mega looking forward to you today.

It's great to have you back on the show.

Today we're going to announce our technology choice for our WebApp and thus shed some light on important software architecture decisions.

Then we'll switch to the practical part of our web app development and you'll learn how to get started with prototypical web development. You will learn how agile software development works in practice and you can start directly hands on and practice-oriented with us in the development of a WebApp.

You can connect directly with our Rock the Prototype community via our Discord server, you can find the Discord link in the show notes.

Our goal is to develop an innovative web app that meets your needs and wishes. That's why we always offer you a clear insight into our common project.

It is important to me to involve you transparently in the web development so that you as listeners have the unique chance to actively participate in the development process.

Your ideas, questions and suggestions are welcome!

Of course you are also welcome to participate passively from the second row. But if you really want to learn something, you have to move to the front row and participate directly.

Use this unique chance and connect with us directly via our Discord server.

1:40min Intro Song mit Countdown Start

ab 2:54 frühestens Launch finsihed, Moderation continue

In our previous fourth podcast episode, you already learned that React with Next and Vue.js and Nuxt are virtually equal JavaScript technologies and score about the same when it comes to creating a WebApp.

Both technologies have a very similar feature set.

The community of both ecosystems is also very active and the number of usable resources, libraries and tools is constantly increasing. Thus, we can access a wide range of resources, tutorials and support in both options.

An important decision criterion for us is the use of reactive components, which again both technologies provide us with equally. This allows us to easily manage data and respond to changes. This is very useful for microservices development.

However, there are new aspects that are very important to us. Privacy, confidentiality and integrity of a technology.

In recent days, Facebook's new Threads app has attracted a lot of attention, however it has not yet received approval in Europe and is not yet available due to privacy concerns in the European union.

At this point, by the way, an explicit warning for those searching for the Threads app in the app stores. Here, in the app search for Threads, an app has cleverly placed itself as an ominous gap filler and is cleverly trying to encourage unsuspecting app users to install it. This app with the app name Threads for Insta is not the app you are looking for and certainly not an app you trust and not even from Meta Group, but is provided by SocialKit LTD and lures supposed users into a subscription trap. So always be attentive from which operator you install an app on your smart phone.

Given this situation, it is worth questioning whether and to what extent an app like Threads, as a new Twitter alternative, should also factor in as a relevant factor when choosing technology between React/Next.js and Vue.js/Nuxt.

Let's first take a look at the technological aspects. React is a popular JavaScript library for user interface development, while Next.js is a framework based on React and offers advanced features like server-side rendering and routing. On the other hand, we have Vue.js, which is also a widely used JavaScript framework based on the idea of components, and Nuxt, a framework based on Vue.js with similar features as Next.js.

Now we come to data protection. Since Threads has not yet received approval in Europe and is closely linked to Meta Group and platforms like Facebook and Instagram, privacy concerns are not unfounded at all.

In this context, choosing Vue.js and Nuxt might be a better option, as they are supported by an independent open source project and do not have a direct connection to big tech companies like Facebook.

Another important point is the linking of Threads with Meta's Instagram platform. An Instagram account is required to use Threads, and merging data from different services could be a privacy issue in the European Union and elsewhere.

Vue.js and Nuxt, on the other hand, have no direct connection to Instagram or other platforms, which could mitigate potential privacy risks.

Even if a framework or software bilbliotheques per se are not in direct influence of a technology corporation, I feel at least instinctively more comfortable with the Vue / Nuxt community as a whole.

We choose Vue.js and Nuxt because we specifically prefer a soft entry to help young developers get started and with Nuxt we also choose a lightweight framework appreciating clean HTML files.

Vue and Nuxt are now very well established.

There is a wide pool of experienced developers in the community. Vue founder Evan You's statement by placing Vue between React and Angular in terms of the tradeoff between consistency and flexibility is another plus.

Now the technology dependency as a criterion takes further influence so I give preference to Vue.js and Nuxt.

So with Vue.js and Nuxt, we will be using JavaScript technologies that will give us performant web applications. By using a Virtual DOM and efficient update strategies, we can track changes quickly and efficiently.

Furthermore, the simplest creation of UIs and frontend apps is in the foreground for us. Vue.js offers us a simple syntax and a clear separation of HTML, CSS and JavaScript for this purpose. This makes it easier to create UI components and develop frontend apps.

This allows us to get started easily: Vue.js has a low barrier to entry, especially for developers who are already familiar with HTML, CSS and JavaScript. The documentation is comprehensive and well-structured, which makes it easy for us to get started.

This allows us to get started easily:

This allows us to get started easily: Vue.js is a lightweight framework that offers good performance. It uses a Virtual DOM to efficiently track changes and update only what is really needed. Nuxt.js offers features like server-side rendering and code splitting that help improve load time and performance.

This allows us to get started easily:

This allows us to get started easily:

This allows us to get started easily:

This allows us to get started easily:

In addition, there are other important arguments in favor of Nuxt:

In addition, there are other important arguments in favor of Nuxt:

In addition, there are other important arguments in favor of Nuxt: The Nuxt developer community is big on interoperability. A smooth technology transition enables seamless migration and integration of new technologies without too much impact on existing projects or development workflows. This approach is based on the idea that new technologies and frameworks are continuously improving and that it is beneficial for developers to have access to the latest developments without completely changing their existing ways of working.

In addition, there are other important arguments in favor of Nuxt:

In addition, there are other important arguments in favor of Nuxt: A key aspect of the smooth technology transition in Nuxt is support for unmodified JavaScript. Developers can easily continue to use their existing JavaScript codebases in Nuxt projects without the need for an immediate conversion to TypeScript. This builds confidence among developers by allowing them to leverage their existing skills and knowledge while benefiting from the advantages and flexibility that TypeScript offers.

In addition, there are other important arguments in favor of Nuxt:

In addition, there are other important arguments in favor of Nuxt: In addition, the Nuxt developer community is showing how important interoperability with other technologies and frameworks is to them. By integrating Vite instead of Webpack, Vue3 instead of Vue2, and using the Composition API instead of the Options API, Nuxt demonstrates its ability to work seamlessly with different tools and libraries. This allows developers to use technologies that best fit their needs without sacrificing the benefits and ecosystem of Nuxt.

In addition, there are other important arguments in favor of Nuxt:

In addition, there are other important arguments in favor of Nuxt: Another important aspect of the smooth technology transition is the active avoidance of vendor lock-in. The Nuxt developer community is consciously embracing technologies and tools that are not tied to specific vendors or platforms. This allows developers to develop and run their projects independent of specific vendors, which increases flexibility and builds confidence in the long-term sustainability of Nuxt.

In addition, there are other important arguments in favor of Nuxt:

In addition, there are other important arguments in favor of Nuxt: This deliberate focus on a smooth technology transition enables the Nuxt community to expand its developer base and appeal to a broader range of developers.

In addition, there are other important arguments in favor of Nuxt:

In addition, there are other important arguments in favor of Nuxt: So experienced developers and newcomers can benefit from the interoperability, flexibility, and continuous development advantages that Nuxt offers.

In addition, there are other important arguments in favor of Nuxt:

In addition, there are other important arguments in favor of Nuxt: The Nuxt developer community demonstrates a forward-thinking approach to software development for web applications and WebApps through its smooth technology transition.

In addition, there are other important arguments in favor of Nuxt:

In addition, there are other important arguments in favor of Nuxt: With its focus on interoperability, support for unmodified JavaScript, and avoidance of vendor lock-in, Nuxt provides developers with the greatest possible flexibility while increasing their confidence in their technology choices.

In addition, there are other important arguments in favor of Nuxt:

In addition, there are other important arguments in favor of Nuxt: This makes Nuxt an attractive choice for projects that want to take advantage of modern technologies without sacrificing their existing resources and experience.

In addition, there are other important arguments in favor of Nuxt:

In addition, there are other important arguments in favor of Nuxt:

In addition, there are other important arguments in favor of Nuxt:

In addition, there are other important arguments in favor of Nuxt:

In addition, there are other important arguments in favor of Nuxt:

In addition, there are other important arguments in favor of Nuxt: Efficiency, reactivity and usability in perfect symbiosis.

In addition, there are other important arguments in favor of Nuxt:

In addition, there are other important arguments in favor of Nuxt: Choosing the right technologies for developing a WebApp is crucial for its success. Nuxt.js and Vue.js have proven to be powerful tools to easily structure applications and build a solid foundation. When combined with the asynchronous techniques of JavaScript, the result is an unbeatable synergy that takes efficiency, responsiveness and usability to a new level.

In addition, there are other important arguments in favor of Nuxt:

1. Nuxt.js and Vue.js: Efficiency and Flexibility

1. Nuxt.js and Vue.js: Nuxt.js helps us structure our WebApp easily and efficiently. It allows us to choose our own architecture and development practices and integrate additional libraries and tools as needed. With Vue.js at the core, we benefit from a flexible and responsive user interface that allows us to develop dynamic and responsive applications.

1. Nuxt.js and Vue.js:

1. Nuxt.js and Vue.js: 2. JavaScript's asynchrony to handle complex tasks

1. Nuxt.js and Vue.js: JavaScript requires us to have an event-driven architecture with largely asynchronous programming. To deal with asynchrony, we often use concepts such as callbacks, promises, and events. These allow us to execute certain actions or functions asynchronously and wait for the result without blocking the main process. These capabilities are especially important for network requests or other ressource-binding tasks that take time to execute.

1. Nuxt.js and Vue.js:

3. promises and async/await: structured asynchrony

3. promises and async/await: Callbacks are one of the oldest techniques for handling asynchronous behavior in JavaScript, but they can lead to cluttered "callback hell." This is where Promises come in, giving us a more elegant way to handle asynchronous operations. Promises represent a result that may become available in the future, and provide methods to wait for or deal with the result once it becomes available.

3. promises and async/await:

3. promises and async/await: With the introduction of ECMAScript6 and later ES2017, JavaScript brought native support for asynchronous programming in the form of async/await. This allows another level of abstraction to be used over promises, making code even more readable and avoiding the nesting of callbacks. With async/await, we can write asynchronous functions that feel like synchronous code, but still don't block the main process.

3. promises and async/await:

3. promises and async/await: With the brand new introduction of ECMAScript 2023, both JavaScript and TypeScript get more exciting features that further improve the language and give us more valuable new options when developing a WebApp.

3. promises and async/await:

3. promises and async/await:

4. synergy in action: modern, performant and responsive WebApps

4. synergy in action: In Nuxt.js and Vue.js, we use these asynchronous techniques to develop our WebApp efficiently. For example, we can execute network requests asynchronously to retrieve data from APIs without freezing the user interface.

4. synergy in action:

4. synergy in action: In doing so, we can wait for the data to be returned using Promises or async/await and then integrate it into our WebApp to make it dynamic and responsive.

4. synergy in action:

4. synergy in action: The combination of Nuxt.js, Vue.js and JavaScripts asynchronous techniques allows us to develop a modern, performant and reactive WebApp that responds quickly and flexibly to user input and network events.

4. synergy in action:

4. synergy in action: With the smooth technology transition and interoperability in the Nuxt developer community, we have maximum flexibility to use technologies that best fit our needs without sacrificing the benefits and ecosystem of Nuxt and Vue.js.

4. synergy in action:

4. synergy in action: At a time when user expectations are constantly rising, this combination is a strong driver for our development of WebApps that should not only be functional, but also provide an impressive user experience. Nuxt supports us perfectly in terms of efficiency, responsiveness and usability - Nuxt is the perfect symbiosis to make our WebApp development successful.

4. synergy in action:

4. synergy in action:

4. synergy in action:

4. synergy in action:

4. synergy in action:

Nuxt.js: A flexible and forward-looking architecture with an eye on the future

Nuxt.js:

Nuxt.js: In our WebApp architecture with Nuxt.js, Node.js and Deno play a significant role as powerful runtime environments for JavaScript and TypeScript. Node.js has meanwhile established itself for the development of server-side applications, whereas Deno, which is still quite uncommon and young, stands out due to its focus on security, simplicity and native TypeScript support.

Nuxt.js:

Nuxt.js: With the integration of TypeScript, a clear trend and central development is emerging. Nuxt3 has taken an exciting step at its core by fully embracing TypeScript as its primary language. This allows for stronger typing and improved code quality, which in turn leads to a robust and scalable software architecture.

Nuxt.js:

Nuxt.js: Node.js is the current de-facto standard and plays an important role in Nuxt development as a powerful JavaScript runtime environment. Through Node.js, Nuxt enables server-side rendering, whereby the WebApp is pre-rendered on the server before being sent to the browser. This results in a significant performance improvement as users get a fully functional page faster. Nuxt's server-side rendering capability also provides significant benefits in terms of search engine optimization, performance, and an overall smooth user experience.

Nuxt.js:

Nuxt.js: The role of Deno for backend components.

Nuxt.js: Another important aspect is the integration of Deno as a powerful TypeScript runtime environment. Nuxt3 enables a pragmatic approach where Node.js is currently used in the build process. However, Nuxt3 already provides the ability to switch backend components to Deno at any time to take advantage of this modern runtime environment.

Nuxt.js:

Nuxt.js: Deno provides secure and high-performance execution of TypeScript on the server and enables seamless integration with the Nuxt framework. With this flexibility, developers are able to choose the best tools for their backend components while benefiting from the power and ecosystem of Nuxt3.

Nuxt.js:

Nuxt.js: A future-oriented architecture

Nuxt.js: The conscious decision to incorporate TypeScript and Deno into Nuxt3's software architecture underscores the future-oriented nature of this framework. Developers can access a well-designed combination of technologies and runtime environments that enable the development of modern and powerful WebApps.

Nuxt.js:

Nuxt.js: The flexibility to support both server-side and client-side rendering, combined with the ability to switch to Deno as a powerful TypeScript runtime environment, gives Nuxt3 remarkable agility in software development. This architecture allows developers to focus on implementing features and improving the user experience without worrying about technical hurdles.

Nuxt.js:

Nuxt.js: With Nuxt.js, TypeScript, Node.js, and Deno, we have innovative and powerful tools at our disposal for software development that enable a modern and future-proof software architecture. The symbiosis of these technologies creates a solid foundation for the development of WebApps that are not only efficient and performant, but also flexible and adaptable to the challenges of the future.

Nuxt.js:

Nuxt.js:

Nuxt.js:

Nuxt.js:

Nuxt.js:

Nuxt.js:

Nuxt.js:

Nuxt.js: Let's move on to the prototypical implementation. We follow the iterative, prototypical approach as presented in our YouTube video "Software Prototyping Made Easy - How Prototyping Works". You can find the link to this video in the show notes.

Nuxt.js:

Nuxt.js: Our prototyping starts with the first phase, the preparation.

Nuxt.js:

Phase 1: Preparation

Phase 1: With phase 1 we make all necessary preparations.

Phase 1:

Phase 1: Step 1.1 - As-is state description

Phase 1:

Phase 1: Our prototyping starts with an as-is state description. We have taken an in-depth look at WebApp technologies, evaluated technologies and made our technology selection with Nuxt.

Phase 1:

Phase 1: Step 1.2 - Rough planning

Phase 1: This is followed by the second step in the first phase, the rough planning for our first iteration.

Phase 1:

Phase 1: Our rough planning includes project setup with setting up the Nuxt project boilerplate, a template for our WebApp.

Phase 1:

Phase 1:

Phase 1: Step 1.3 - Define goals

Phase 1:

Phase 1: In the third step in Phase 1, we define the goals for our first prototype.

Phase 1: Based on our rough planning, we define the goals for our first iteration prototyping.

Phase 1:

Phase 1: With our first iteration stage, we will focus on setting up our development environment. 
We will use the Nuxt project boilerplate and use it to set up the basic structure for our WebApp.

Phase 1:

Phase 1: Our goals for the first iteration are:


Phase 1: 1. We have our development environment set up

2. Project setup: Creation of a project folder and initialization of a Git repository.

2. Project setup: 3. the MVP uses the Nuxt boilertemplate

2. Project setup: 4. the MVP is executable

2. Project setup: 5. our MVP is suitable for further modification

2. Project setup: 6. we are familiar with the basic structure of the Nuxt framework

2. Project setup: 7. we use GitHub and have deployed our Nuxt the Prototype to the GitHub repository

2. Project setup:

2. Project setup:

2. Project setup:

2. Project setup:

2. Project setup:

2. Project setup:

2. Project setup:

Phase 2: Specification

Phase 2: Now we have to specify our prototype as an MVP. To do this, we define software functions with a defined scope of services.

Phase 2:

Phase 2: 2.1 Prototype = Specify MVP

Phase 2:

Phase 2: Phase 2 - Step 1 Specify MVP

Phase 2:

Phase 2: For our Nuxt boilerplate-based MVP, this is still easy because its feature set is fully provided. This is particularly convenient for us. Without having to make any modification on the code side, this MVP is already executable.

Phase 2:

Phase 2: In this first iteration we will focus on getting familiar with the Nuxt architecture and getting our development environment and project management working smoothly.

Phase 2:

Phase 2: Phase 2 - Step 2 the

Phase 2: 2.2 Effort estimation

Phase 2:

Phase 2: In the specification phase, we also perform an effort estimation and define acceptance criteria. Based on this prototyping specification we define a target date to finish our iteration.

Phase 2:

Phase 2: So we follow the strategy of feature boxing and do not use fixed time intervals, but only maximum time targets.

Phase 2:

Phase 2: Feature Driven defined requirements are always fine-granular and thus can be evaluated at any time with respect to the associated effort. In addition, with Feature Boxing we will organize our tasks sensibly into feature groups and thus deliver technically meaningful units and functions to our users with each new MVP release.

Phase 2:

Phase 2: Thus, there will never be any cutbacks to our planned release dates at the expense of the respective predefined functionality. In addition, it is always possible to see exactly whether we are on schedule, have exceeded our schedule or are falling behind our schedule.

Phase 2:

Phase 2: In feature boxing, we also commit to postponing our implementation date if functions are more time-consuming to implement than planned.

Phase 2:

Phase 2: So feature boxing is feature-driven agile time management.

Phase 2:

Phase 2: I allowed myself one workday, or 8 man hours, for our prototyping goals in the first iteration. In addition, I made two Rock the Prototype video tutorials to accompany this podcast episode, giving you step-by-step at any time not only what to do to initalize the Nuxt boilerplate, but also the technical background and context for doing so. The video creation is complex and has cost me more hours of work. But such videotutorials are very helpful in every project and serve the project documentation.

Phase 2:

Phase 2:

Phase 2:

Phase 2:

Phase 2:

Phase 2: Project management + time planning in Jira

Phase 2:

Phase 2: Another component of our rough planning is project management with the determination of effort.

Phase 2:

Phase 2: Even if these small tasks are still easily manageable, it makes sense to define these tasks in an easily understandable and well-structured way as individual Jira tasks and to document them using the collaboration tool Confluence.

Phase 2:

Phase 2: Why?

Phase 2:

Phase 2: We then know at any time - even months later - exactly how we proceeded. But not only that. Via Jira, we can now directly start practicing effort estimation and make Jira Tasks easy to understand for others.

Phase 2:

Phase 2: But there is another invaluable benefit.

Phase 2:

Phase 2: In addition to a detailed effort estimate, we make it easier for other teams and virtually any stakeholder to understand our activities. Not only newcomers in our organization, but every team member can easily acquire knowledge independently at any time. Finally, it is important that knowledge is always transparent and easily accessible.

Phase 2:

Phase 2: There is a third solid argument for this precise approach. Errors - for example in configuration or assumptions, estimates, etc. - can be traced at any time through this transparent way of working. This promotes a healthy error culture in your organization!

Phase 2:

Phase 2: Thus, the basic setup and use of these indispensable collaboration tools is already part of our first iteration stage.

Phase 2:

Phase 2:

Phase 2:

Phase 2:

Phase 3: Implement

Phase 3:

Phase 3: We implement our MVP.

Phase 3:

Phase 3: First, we create a project folder and initialize a Git repository for our local development environment. This ensures that we version our project in a git-based way from the beginning.

Phase 3:

Phase 3: This also includes making all the necessary preparations within our project so that based on the Nuxt framework, we complete the first MVP "Nuxt the Prototype" by the end of our first iteration stage. We also need to resolve all dependencies within the Nuxt framework and import appropriate libraries and put tools into operation in our development environment.

Phase 3:

Phase 3: This includes appropriate package managers to organize these dependencies in terms of version levels and software libraries.

Phase 3:

Phase 3: Then we use the NPM package executor, or npx for short. Use the handy npx tool to execute node packages and npm package binaries. NPX comes in handy as a tool whenever we want to execute commands included in a package without actually installing the package itself.

Phase 3: You can also follow this step by step by watching our YouTube tutorial.

Phase 3:

Phase 3: With these implementation steps, the Nuxt project template saves us the time-consuming task of creating the basic structure of a Nuxt project and already provides a predefined folder structure, configurations, and basic files for our WebApp. With all these activities, we are already in the middle of our practical part. This is how our functional MVP is created via the Nuxt project boilerplate. This saves us a lot of time and effort in creating the basic structure of our Nuxt project.

Phase 3:

Phase 3: Our deployment this time is limited to our GitHub remote repository. You can find the link in the show notes.

Phase 3:

Phase 3: The directories .nuxt and node_modules were not transferred to the public GitHub repo. Why?

Phase 3:

Phase 3: There are good reasons:


* Unnecessary upload: The "node_modules" directories contain all the external dependencies of our Nuxt the Prototype project, which we can restore at any time by running a command through our package manager npm. All dependencies are listed in package.json. Therefore, it is unnecessary to store them in the repository and upload them. They would only unnecessarily bloat our repository and make uploading and cloning slower. 


* Confidential Information: Please always be careful not to provide any sensitive information such as credentials or tokens in a repository. Always be aware that data that is not intended for the public has no place in a repository. 


* Consistency and repeatability: By ignoring "node_modules" we can ensure that all developers in the project install the same dependencies. By doing this, we promote consistency and repeatability in our development environment.


* Consistency and repeatability: Similarly, the ".nuxt" directory is generated by Nuxt.js. It contains temporary files and artifacts that don't need to be included in the repository, as they can be restored by running the build process in-place.

* Consistency and repeatability:

* Consistency and repeatability: And by in-place, it means something like your local development environment or a deployment environment like staging or the production environment.

* Consistency and repeatability:

* Consistency and repeatability:

* Consistency and repeatability:

* Consistency and repeatability:

* Consistency and repeatability: So the provided GitHub repo always contains everything you need to actively work on our project. All required dependencies can be restored with the command "npm install". You can find the link to our GitHub repo in the show notes where you can also find the links to our YouTube tutorials.

* Consistency and repeatability:

* Consistency and repeatability: With these practical tips and a solid understanding of the Nuxt framework, you'll be well prepared to join us in building our WebApp.

* Consistency and repeatability:

* Consistency and repeatability: I hope you found today's podcast episode informative about developing a WebApp with the Nuxt Framework. Stay tuned, because in upcoming podcast episodes we will of course continue with the development of our WebApp.

* Consistency and repeatability:

* Consistency and repeatability: Via our Discord server you have the possibility to contact us at any time, ask questions and get actively involved and contribute to the development.

* Consistency and repeatability:

* Consistency and repeatability: You can find all information in the Shownotes and on our website at http://www.rock-the-prototype.com .

* Consistency and repeatability:

* Consistency and repeatability: Whether you're a more experienced developer or just diving into the world of programming, Rock the Prototype is the place for you.

* Consistency and repeatability:

* Consistency and repeatability: So, subscribe to our podcast now and let's rock software development & prototyping together!

* Consistency and repeatability:

* Consistency and repeatability: If you have any questions or need more information, don't hesitate to reach out to me.

* Consistency and repeatability:

* Consistency and repeatability: Thanks for listening and see you on the next episode of the Rock the Prototype Podcast!

* Consistency and repeatability:

* Consistency and repeatability: Your Sascha Block

* Consistency and repeatability: