DEV Community: Packt

Managing and handling the filesystem using .NET Core

Packt — Fri, 27 Dec 2019 09:21:24 +0000

Applications will often need to perform input and output of particular code with files and directories in different environments. The System and System.IO namespaces contain classes for this purpose.

This article is an excerpt from the book C# 8.0 and .NET Core 3.0 - Modern Cross-Platform Development - Fourth Edition written by Mark J. Price. Mark follows a step-by-step approach in the book filled with exciting projects and fascinating theory for the readers in this highly acclaimed franchise.

Handling cross-platform environments and filesystems

Let's explore how to handle cross-platform environments like the differences between Windows and Linux or macOS.

Create a new console application named WorkingWithFileSystems in a folder named Chapter09.
Save the workspace as Chapter09 and add WorkingWithFileSystems to it.
Import the System.IO namespace, and statically import the System.Console, System.IO.Directory, System.Environment, and System.IO.Path types, as shown in the following code:


 System.IO; // types for managing the filesystem
using static System.Console;
using static System.IO.Directory;
using static System.IO.Path;
using static System.Environment;

Paths are different for Windows, macOS, and Linux, so we will start by exploring how .NET Core handles this.

Create a static OutputFileSystemInfo method, and write statements to do the following:
- Output the path and directory separation characters
- Output the path of the current directory
- Output some special paths for system files, temporary files, and documents


 void OutputFileSystemInfo()
  {
   WriteLine("{0,-33} {1}", "Path.PathSeparator", PathSeparator);
   WriteLine("{0,-33} {1}", "Path.DirectorySeparatorChar",
     DirectorySeparatorChar);
   WriteLine("{0,-33} {1}", "Directory.GetCurrentDirectory()",
     GetCurrentDirectory());
   WriteLine("{0,-33} {1}", "Environment.CurrentDirectory",
     CurrentDirectory);
   WriteLine("{0,-33} {1}", "Environment.SystemDirectory", 
     SystemDirectory);
   WriteLine("{0,-33} {1}", "Path.GetTempPath()", GetTempPath());
   WriteLine("GetFolderPath(SpecialFolder");
   WriteLine("{0,-33} {1}", "  .System)", 
     GetFolderPath(SpecialFolder.System));
   WriteLine("{0,-33} {1}", "  .ApplicationData)",
     GetFolderPath(SpecialFolder.ApplicationData));
   WriteLine("{0,-33} {1}", "  .MyDocuments)",
     GetFolderPath(SpecialFolder.MyDocuments));
   WriteLine("{0,-33} {1}", "  .Personal)",
     GetFolderPath(SpecialFolder.Personal));
  }

The Environment type has many other useful members, including the GetEnvironmentVariables method and the OSVersion and ProcessorCount properties.

In the Main method, call OutputFileSystemInfo, as shown in the following code:
```
void Main(string[] args)
{
 OutputFileSystemInfo();
}
```
Run the console application and view the result, as shown in the following screenshot when run on Windows:

Windows uses a backslash for the directory separator character. macOS and Linux use a forward slash for the directory separator character.

Managing drives

To manage drives, use DriveInfo, which has a static method that returns information about all the drives connected to your computer. Each drive has a drive type.

Create a WorkWithDrives method, and write statements to get all the drives and output their name, type, size, available free space, and format, but only if the drive is ready, as shown in the following code:


 void WorkWithDrives()
 {
   WriteLine("{0,-30} | {1,-10} | {2,-7} | {3,18} | {4,18}",
     "NAME", "TYPE", "FORMAT", "SIZE (BYTES)", "FREE SPACE");
   foreach (DriveInfo drive in DriveInfo.GetDrives())
   {
     if (drive.IsReady)
     {
       WriteLine(
         "{0,-30} | {1,-10} | {2,-7} | {3,18:N0} | {4,18:N0}",
         drive.Name, drive.DriveType, drive.DriveFormat, 
         drive.TotalSize, drive.AvailableFreeSpace);
     }
     else
     {
      WriteLine("{0,-30} | {1,-10}", drive.Name, drive.DriveType);
     }
   }
 }

In Main, comment out the previous method call, and add a call to WorkWithDrives, as shown in the following code:


 void Main(string[] args)
 {
    // OutputFileSystemInfo();
   WorkWithDrives();
 }

Run the console application and view the result, as shown in the following screenshot:

Managing directories

To manage directories, use the Directory, Path, and Environment static classes.

These types include many properties and methods for working with the filesystem, as shown in the following diagram:

When constructing custom paths, you must be careful to write your code so that it makes no assumptions about the platform, for example, what to use for the directory separator character.

Create a WorkWithDirectories method, and write statements to do the following:
- Define a custom path under the user's home directory by creating an array of strings for the directory names, and then properly combining them with the Path type's static Combine method.
- Check for the existence of the custom directory path using the static Exists method of the Directory class.
- Create, and then delete the directory, including files and subdirectories within it, using the static CreateDirectory and Delete methods of the Directory class. static void WorkWithDirectories() { // define a directory path for a new folder // starting in the user's folder var newFolder = Combine( GetFolderPath(SpecialFolder.Personal), "Code", "Chapter09", "NewFolder"); WriteLine($"Working with: {newFolder}"); // check if it exists WriteLine($"Does it exist? {Exists(newFolder)}"); // create directory WriteLine("Creating it..."); CreateDirectory(newFolder); WriteLine($"Does it exist? {Exists(newFolder)}"); Write("Confirm the directory exists, and then press ENTER: "); ReadLine(); // delete directory WriteLine("Deleting it..."); Delete(newFolder, recursive: true); WriteLine($"Does it exist? {Exists(newFolder)}"); }
In the Main method, comment out the previous method call, and add a call to WorkWithDirectories, as shown in the following code:


 void Main(string[] args)
{
  // OutputFileSystemInfo();
  // WorkWithDrives();
  WorkWithDirectories();
}

Run the console application and view the result, and use your favorite file management tool to confirm that the directory has been created before pressing Enter to delete it, as shown in the following output: Working with: /Users/markjprice/Code/Chapter09/NewFolder

Does it exist? False
Creating it...
Does it exist? True
Confirm the directory exists, and then press ENTER:
Deleting it...
Does it exist? False

Managing files

When working with files, you could statically import the File type, just as we did for the Directory type, but, for the next example, we will not, because it has some of the same methods as the Directory type and they would conflict. The File type has a short enough name not to matter in this case.

Create a WorkWithFiles method, and write statements to do the following:
- Check for the existence of a file.
- Create a text file.
- Write a line of text to the file.
- Close the file to release system resources and file locks (this would normally be done inside a try-finally statement block to ensure that the file is closed even if an exception occurs when writing to it).
- Copy the file to a backup.
- Delete the original file.
- Read the backup file's contents and then close it. static void WorkWithFiles() { // define a directory path to output files // starting in the user's folder var dir = Combine( GetFolderPath(SpecialFolder.Personal), "Code", "Chapter09", "OutputFiles"); CreateDirectory(dir); // define file paths string textFile = Combine(dir, "Dummy.txt"); string backupFile = Combine(dir, "Dummy.bak"); WriteLine($"Working with: {textFile}"); // check if a file exists WriteLine($"Does it exist? {File.Exists(textFile)}"); // create a new text file and write a line to it StreamWriter textWriter = File.CreateText(textFile); textWriter.WriteLine("Hello, C#!"); textWriter.Close(); // close file and release resources WriteLine($"Does it exist? {File.Exists(textFile)}"); // copy the file, and overwrite if it already exists File.Copy(sourceFileName: textFile, destFileName: backupFile, overwrite: true); WriteLine( $"Does {backupFile} exist? {File.Exists(backupFile)}"); Write("Confirm the files exist, and then press ENTER: "); ReadLine(); // delete file File.Delete(textFile); WriteLine($"Does it exist? {File.Exists(textFile)}"); // read from the text file backup WriteLine($"Reading contents of {backupFile}:"); StreamReader textReader = File.OpenText(backupFile); WriteLine(textReader.ReadToEnd()); textReader.Close(); }
In Main, comment out the previous method call, and add a call to WorkWithFiles.

Run the application and view the result, as shown in the following output:


with: /Users/markjprice/Code/Chapter09/OutputFiles/Dummy.txt 
Does it exist? False
Does it exist? True
Does /Users/markjprice/Code/Chapter09/OutputFiles/Dummy.bak exist? True 
Confirm the files exist, and then press ENTER:
Does it exist? False
Reading contents of /Users/markjprice/Code/Chapter09/OutputFiles/Dummy.bak:
Hello, C#!

Managing paths

Sometimes, you need to work with parts of a path, for example, you might want to extract just the folder name, the file name, or the extension. Sometimes, you need to generate temporary folders and file names. You can do this with static methods of the Path class.

Add the following statements to the end of the WorkWithFiles method:


Managing paths
WriteLine($"Folder Name: {GetDirectoryName(textFile)}");
WriteLine($"File Name: {GetFileName(textFile)}");
WriteLine("File Name without Extension: {0}",
  GetFileNameWithoutExtension(textFile));
WriteLine($"File Extension: {GetExtension(textFile)}");
WriteLine($"Random File Name: {GetRandomFileName()}");
WriteLine($"Temporary File Name: {GetTempFileName()}");

Run the application and view the result, as shown in the following output:
Folder Name: /Users/markjprice/Code/Chapter09/OutputFiles
File Name: Dummy.txt
File Name without Extension: Dummy
File Extension: .txt
Random File Name: u45w1zki.co3
Temporary File Name:
/var/folders/tz/xx0y_wld5sx0nv0fjtq4tnpc0000gn/T/tmpyqrepP.tmp

GetTempFileName creates a zero-byte file and returns its name, ready for you to use. GetRandomFileName just returns a filename; it doesn't create the file.

To summarize, we explored how to manage and handle filesystem using .NET Core. If you want to learn the fundamentals, how to build practical applications, and the latest features of C# 8.0 and .NET Core 3.0, check out our latest book C# 8.0 and .NET Core 3.0 - Modern Cross-Platform Development - Fourth Edition written by Mark J. Price.

About the author

Mark J. Price is a Microsoft Specialist: Programming in C# and Architecting Microsoft Azure Solutions, with more than 20 years of educational and programming experience. Since 1993, Mark has passed more than 80 Microsoft programming exams and specializes in preparing others to pass them too. His students range from professionals with decades of experience to 16-year old apprentices with none. He successfully guides all of them by combining educational skills with real-world experience in consulting and developing systems for enterprises worldwide.

Mobile E-Commerce with Flutter, Redux, and Stripe

Packt — Thu, 26 Dec 2019 10:16:33 +0000

Published: Oct 2019
Build an online marketplace for your mobile apps!

In this course, we'll build a full-stack e-commerce mobile application from scratch, with a complete shopping cart for authenticated users as well as an entire customer checkout.

This will be a complete app with an eye-catching UI using the Flutter Material Library and Redux for global state management and Redux Thunk for async actions. This will be a complete API with custom controllers thanks to Strapi, with our app data stored in a cloud MongoDB Atlas database and user authentication with Register/Login.

We will cover the following topics in this course:

Async/await functions in Flutter, making authenticated requests
Rapidly building a highly functional REST API with Strapi
Managing/storing API data with the MongoDB Atlas cloud database
Persisting data locally in Flutter with SharedPreferences
Decoding/encoding and serializing/deserializing JSON data with Dart
Navigation/routing in Flutter
Using themes in Flutter to share color/text styles across apps
Constructing forms/managing form state in Flutter apps
Securely registering/logging-in users with JSON web tokens
Form validation/error handling in Flutter
Multi-child layout widgets: ListViews, GridViews, TabBars, and more
Custom material-theme styling
Formatting dates in Flutter with the Intl library

And much more!

This course will give you the core structure and techniques you need to build any sort of mobile store with Flutter, whatever product or service you sell.

All the code files are placed at https://github.com/PacktPublishing/Mobile-E-Commerce-with-Flutter-Redux-and-Stripe

The Gatsby Masterclass

Packt — Thu, 26 Dec 2019 10:16:08 +0000

Published: Oct 2019

Do you want to make the fastest and best React applications? Look no further than Gatsby. This course is the best guide you'll find to learn the Gatsby framework. In it, we will be making a complete blog and online store, from project start to deployment on the web.

Here's what we'll be learning:

A complete blog/online store built entirely with Gatsby and GraphQL, user authentication with multi-factor authentication, content served from the Contentful headless CMS (with blog posts written entirely in markdown), and continuous deployment with Netlify

What will be covered?

How to use GraphQL in great detail, from the GraphiQL IDE to your React/Gatsby client

Using GraphQL variables, arguments, fragments, and many more related concepts
Sorting and filtering operations in GraphQL queries
Utilizing the cloud-hosted headless CMS called Contentful for dead-simple content management
Executing queries from Gatsby client with static queries and page queries
Amazingly responsive images with Gatsby Image
Fetching/managing Gatsby data with Gatsby source plugins
Transforming data using Gatsby Transformer plugins
Converting markdown data to HTML content with Gatsby
Programmatically creating site pages in Gatsby
Pagination in Gatsby (Prev/Next links, numbered pagination)
User authentication using Netlify Identity
Social login with Google, GitHub, GitLab, and Bitbucket providers
Multi-factor authentication with account confirmation emails
Shopping cart and user purchases with Snipcart
Continuous deployment through Git/GitHub with Netlify
Routing, nested routes, links, and active links in Gatsby
And much more...

How to convince your engineering lead to adopt Flutter

Packt — Tue, 17 Dec 2019 10:41:35 +0000

By Salvatore Giordano

At the moment I'm not really into writing Flutter code, and I miss it.

I've changed jobs more or less 10 months ago. Now I'm a backend microservices developer using Node.js as a primary tool, but after all this time I'm starting to miss Flutter, Dart and that great community.

So, my new mission is to convince my engineering lead to let me rewrite our main application using Google's cross-platform framework - Flutter. I succeeded one year ago with my former employer, but everyone is different in this life.

What is Flutter

Flutter is an application development framework made by Google used for creating cross-platform mobile applications (in iOS and Android). As mentioned on the official website, it aims to make the development as easy, quick, and productive as possible. Flutter’s features including Hot Reload, a vast widget catalog, powerful performance, and a solid community contribute to meeting that objective and makes Flutter a pretty good framework.

Why use Flutter

What makes Flutter approachable to developers is that it requires no prior mobile experience and little programming skills. If you are familiar with object-oriented concepts (classes, methods, variables, etc) and imperative programming concepts (loops, conditionals, etc), you are good to get started.

Flutter uses neither WebView nor the OEM widgets that ship with a mobile device, instead of using its own rendering engine to draw widgets. Flutter provides a set of widgets (including Material Design and Cupertino (iOS-styled) widgets), managed and rendered by Flutter’s framework and engine.

It only has a thin layer of C/C++ code implementing most of its system in Dart that developers can easily approach read, change, replace, or remove. Unlike Javascript where UI experience is Just In Time compiled, Flutter provides a native experience being Ahead Of Time compiled. Flutter also provides a straightforward integration with Firebase making your infrastructure instantly serverless, redundant and scalable.

Flutter also increases developer productivity by allowing them to see changes they make to the state of an app in less than one second. This is done using Flutter’s “hot reload” feature that makes you able to reload the application UI keeping the application state in memory.

Not just that, at 2019 Google I/O, Google made a major overhaul to its Flutter UI framework expanding it from mobile to multi-platform. The company released the first technical preview of Flutter for Web. In September at GDD, the team announced the successful integration of Flutter’s web support into the main Flutter repository that will allow developers to write for desktop, mobile as well as Web with the same codebase.

My journey to convince my lead for Flutter

At first, I tried saying something about this wonderful framework now and then:

We could try Flutter to write our app!
We have only one Android and one iOS developer, maybe we'll benefit in productivity!
Mhhh we have this brand new feature to implement: using a cross-platform framework that makes you able to save and look at the result without recompiling everything every time may help us to implement it quicker!
Hey! Look at that bird! Reminds me about Dash, do you know him? The Flutter mascot!

Every moment is good to remind my teammates and my CTO to take a look at Flutter. I'm becoming worse than those subliminal messages in old movies so loved by the conspiracy guys over the web.

But nothing could scratch that bad feeling that people have about cross-platform applications. Also, they already had a bad experience using Cordova.

In my prior job, I had more free time than now and I decided to rewrite one of our applications in Flutter from scratch over the weekend. The application was loved by my entire team. Since then, they've never seen another native application: Flutter was more comfortable and easy to use.

So, what is the next step into my evil plan for Flutterization?

We are an electric scooter sharing company. Apart from our main app, we have another application (at the moment an Angular web app, but we want to rewrite that using a cross-platform framework) used by the service team which is responsible for changing batteries and maintaining our scooter fleets.

My idea is to write the service-app using Flutter and there is a strong probability that it will be a success, everybody will love it and it would be better instead of maintaining two different (but functionally equal) applications.

How to convince your team to move to Flutter?

Summarizing, here is my advice to convince your tech lead/product manager to consider Flutter as your next application framework:

Tell him about Flutter, the community, and it’s benefits. Try to convince him and your team by explaining real-world applications using Flutter.
Take the risky choice of investing your personal free time to learn Flutter and bring to your boss the results.
Try to rebuild some application, written in some other framework, in Flutter.
For starters, use Flutter to craft a side-application, not your main application or an application for your clients.

I hope your boss appreciates your efforts and Flutter will eventually be your new daily companion.

How to learn Flutter? If you want to take a brief journey into the Flutter world you can find my book on Packt Publishing, Google Flutter Mobile Development Quick Start Guide. In this book, you will understand the fundamentals of Flutter and get started with cross-platform mobile app development. You will learn about different widgets in Flutter and understand the concepts of Routing and Navigating. You will also work with Platform-specific code to use Native features and deploy your application on iOS and Android.

Author Bio

Salvatore Giordano is a 23-year-old software engineer from Italy. He currently works as a mobile and backend developer in Turin, where he attained a bachelor's degree in computer engineering. He is a member of the Google Developer Group of Turin, where he often gives talks regarding his experiences. He has written many articles on Flutter and contributed to the development of a number of plugins and libraries for the framework.

Vue.js: build a full stack app with firebase, vuex and router

Packt — Thu, 05 Dec 2019 10:01:38 +0000

Packt Video: 6 hours 5 minutes

Author: Chris Dixon

Overview

Take your JavaScript and Vue skills to the next level by learning state management, routing, authentication, and Firebase

Learn:

• Discover core Vue concepts such as for instance methods, looping, components, data binding, passing data and event handling
• Understand how to apply routing concepts such as scroll behaviour and navigation guards
• Integrate Firebase with projects for persistent data storage and authentication

During this course, you will build a full stack project and discover how to integrate state management, front-end routing, databases, authentication and code splitting.

You will build a pizza restaurant project from scratch which allows users to place an order from a menu section. These orders are then pushed to Firebase for persistent data storage. You will also create an admin section, where authorized users can add or remove menu items and manage orders that are placed. These orders will also be pushed to Firebase. All your pages will be managed by the Vue Router and you’ll learn to create routes, navigation methods, navigation guards, binding routes and different router modes.

This project uses Vuex for state management, which will give your app a single store for all of your state. It will be kept in sync with Firebase, so you’ll always have easy, local access to your data. By the end of this course, you will be well-versed with JavaScript and Vue and have developed the skills you need to build robust projects from scratch.

All the codes and supporting files for this course are available at -https://github.com/PacktPublishing/Vue.js-Build-a-Full-Stack-App-With-Firebase-Vuex-and-Router

Building Forms with Vue.js

Packt — Mon, 02 Dec 2019 06:48:28 +0000

Packt Book: 108 pages

Author: Marina Mosti

Overview

Learn how to build dynamic schema-driven forms with Vue from scratch

Learn

• Learn all about the basics of creating reusable form components with the Vue framework
• Understand v-model and how it plays a role in form creation
• Create forms that are completely powered and generated by a schema, either locally or from an API endpoint
• Understand how Vuelidate allows for easy declarative validation of all your form’s inputs with Vue’s reactivity system
• Connect your application with a Vuex-powered global state management
• Use the v-mask library to enhance your inputs and improve user experience (UX)

You’ll get off to a steady start by setting up the demo project. Next, you’ll get to grips with component composition from creating reusable form components through to implementing the custom input components. To further help you develop a convenient user input experience, the book will show you how to enhance custom inputs with v-mask. As you progress, you’ll get up to speed with using Vuelidate and Vuex to effectively integrate your forms. You’ll learn how to create forms that use global state, reactive instant user input validation and input masking, along with ensuring that they are completely schema-driven and connected to your application’s API. Every chapter builds on the concepts learned in the previous chapter, while also allowing you to skip ahead to the topics you’re most interested in.

By the end of this book, you will have gained the skills you need to transform even the simplest form into a crafted user and developer experience with Vue.

The Ruby Workshop

Packt — Fri, 29 Nov 2019 10:22:50 +0000

Cut through the noise and get real results with a step-by-step approach to learning Ruby programming.

About the book:

● Get to grips with the fundamentals of Ruby object-oriented programming
● Understand common Ruby patterns to help minimize and easily maintain code
● Explore ways to fetch, process, and output external data
● Discover ways to work with public APIs and create reusable RubyGems
● Keep your development process bug-free with various testing methods
● Explore how to host applications on cloud application platforms like Heroku

Description:

You already know you want to learn Ruby, and the smarter way to learn Ruby 2.X is to learn by doing. The Ruby Workshop focuses on building up your practical skills so that you can kick-start your career as a developer and rapidly prototype applications. You'll learn from real examples that lead to real results.

Throughout The Ruby Workshop, you'll take an engaging step-by-step approach to understanding the Ruby language. You won't have to sit through any unnecessary theory. If you're short on time you can jump into a single exercise each day or spend an entire weekend learning about metaprogramming. It's your choice. Learning on your terms, you'll build up and reinforce key skills in a way that feels rewarding.

Every physical copy of The Ruby Workshop unlocks access to the interactive edition. With videos detailing all exercises and activities, you'll always have a guided solution. You can also benchmark yourself against assessments, track progress, and receive content updates. You'll even earn a secure credential that you can share and verify online upon completion. It's a premium learning experience that's included with your printed copy. To redeem, follow the instructions located at the start of your Ruby book.

Fast-paced and direct, The Ruby Workshop is the ideal companion for Ruby beginners. You'll build and iterate on your Ruby code like a software developer, learning along the way. This process means that you'll find that your new skills stick, embedded as best practice. A solid foundation for the years ahead.

Testing Vue.js Components with Jest

Packt — Fri, 29 Nov 2019 10:10:34 +0000

Packt Book: 88 Pages

Author: Alex Jover Morales

Overview
Unit test your Vue.js components with this fully featured JavaScript testing framework

Learn

Set up a Vue-test project to get started with Jest
Unit test your components using techniques such as shallow rendering
Gain insights into how to test the reactive parts in the logic of the Vue.js components
Explore how to test deeply rendered Vue.js components
Perform easy and quick tests with module dependency mocking, module aliasing, and more
Know-how and when to use snapshot testing

This book shows you how to test Vue.js components easily and take advantage of the fully featured Jest testing framework with the aid of practical examples. You'll learn the different testing styles and their structures. You'll also explore how your Vue.js components respond to various tests. You'll see how to apply techniques such as snapshot testing, shallow rendering, module dependency mocking, and module aliasing to make your tests smooth and clean.

By the end of this book, you'll know all about testing your components by utilizing the features of Jest.

Bad forms cost money: Front-end developers need to respect their impact, says Marina Mosti

Packt — Thu, 07 Nov 2019 09:45:52 +0000

“I recently found myself in this situation with an airline” Marina Mosti tells me. “I just couldn't get myself registered for their miles program... these problems, sometimes as developers we don’t really stop to think about the impact that they have.”

Marina Mosti is a Vue developer. She’s an important figure in the community having written an extensive and widely used range of tutorials on Vue including Hands On Vue.js for Beginners series on Dev.to. Most recently, Marina’s been spending a lot of time on forms: her first book, Building Forms with Vue.js, was published at the end of October. Forms might feel like a bit of a basic topic when it comes to front end development, but Marina is eager to encourage developers to spend much more time thinking about how they build them.

Forms are business-critical

She points out that building forms is one of the most business-critical aspects of front-end development. “At a company-level point of view, you’re losing money. You’re losing customers,” she says.

It makes sense: Marina’s story of a lousy form is one that pretty much anyone can recognise. It’s so common that we often come to just accept it and move on with our lives. From a developer perspective - and from a commercial one as well - that simply shouldn’t be acceptable. “This is our way of communicating with the user,” Marina explains. “This is where the user is going to either have a really good customer experience or they’re going to go away - and they’re going to just go to the competition.”

Inside Building Forms with Vue.js

It’s because of this tendency to underestimate the value of forms in UX that Marina’s book has such relevance for front end developers today. It isn’t long: at 108 pages its lean and lightweight like a nicely built application. But that doesn’t mean it doesn’t pack a practical and focused punch.

“The book... takes you on a journey of helping you to understand how to build forms with Vue” Marina says. So, to a certain extent, it does exactly what it says it will do. But that doesn’t mean it’s just a code manual like any other tutorial you might find online.

Although, as Marina explains, “you’re going to start very simple, getting your project set up, understanding how to create reusable components,” the book then goes on to explore more advanced topics such as form input masking (“a great UX capability for forms that is often overlooked” Marina says), implementing Vuex to manage global state, before going on to explain how to build schema-driven forms in the book’s final chapter.

Schema driven forms are particularly important as they can help developers manage significant complexity without getting stuck in endless lines of code. “As a developer you don’t even need to go into your front-end code to make changes,” Marina explains.

“I’ve seen plenty of real-life examples… I’ve seen people do API-driven forms where the API is throwing a schema at you and the front end just knows how to parse it and deliver the form to the user” Marina says, while there are also “other solutions... where they’re using Apollo (a GraphQL toolkit for managing data) and they’re actually parsing the Apollo structure in a way that vue knows and understands what kind of form they’re going to deliver.”

What makes Vue a great JavaScript framework?

The other important aspect of Marina’s book is that building forms shows off some of the things that makes Vue.js a great JavaScript framework. Although it’s still sitting in second place in terms of downloads, Marina - and, indeed, her book - makes a really clear case for using Vue.

The most important advantage is Vue’s flexibility. “Vue can work very nicely as a standalone library where you’re just using it for this little piece or component in your application, or it can grow exponentially to this huge framework where you have all these amazing tools like Vue CLI, Vuex, all the libraries that plug into it.”

More specific to form building, it’s Vue’s component structure that provides a really neat foundation for developing reliable, stylish forms that support an exemplary UX. “This is where Vue starts to shine. You can create components for your inputs that are very reusable,” Marina explains. This means, “adding fields or removing fields is going to be very lightweight for the developer.

Comparing Vue in this regard to older frameworks like Backbone or jQuery, where it “could be a… sizeable task to just remove a field because you would have to dig into so many files and… figure out how everything was connected.”

However, flexibility remains crucial. While being able to build forms in a way that is lightweight and simply more manageable is one of the advantages of Vue, it also allows you to scale things as necessary with what Marina describes as a “simple to big approach.”

Get your hands dirty and learn from experience

If you want to get started with Vue, Marina’s book is a great starting point. But Marina highlights that’s what particularly important is that you need to just get started. Knowledge accumulation is great, but you need to actually learn from experience: “[You’ve] got to start trying to build some things. Even if it’s something super simple, just start getting your hands dirty because that is the way that all of this knowledge that you’ve accumulated is going to start making sense to you.”

Marina was speaking to Richard Gall, an editor at Packt.

Follow Marina on Twitter: @MarinaMosti

Buy Building Forms with Vue.js from Packt today.

Getting started with CI/CD on AWS

Packt — Thu, 31 Oct 2019 09:42:42 +0000

In today's rapidly growing world, every enterprise faces the challenge of matching its pace with customer expectations and software delivery speed. Continuous Integration/Continuous Delivery (CI/CD) is a part of DevOps that can help to achieve rapid software changes while maintaining system stability and security. In this post you will understand how CI/CD works on AWS.

This post is an excerpt taken from the book by Packt Publishing titled ‘AWS Certified Developer - Associate Guide - Second Edition’ and written by Vipul Tankariya and Bhavin Parmar. This book will take you through AWS DynamoDB A NoSQL Database Service, Amazon Simple Queue Service (SQS) and CloudFormation Overview, and much more.

There are various individual AWS web services for DevOps, such as CodeCommit, CodeBuild, CodeDeploy, and CodePipeline. Respectively, these AWS services act as a source code repository and continuous integration service that is responsible for compiling source code, running tests, and producing software packages that are ready to deploy. The deployment service can automate software deployment on various AWS compute services and on-premises servers, and automate the build, test, and deploy phases for the release process.

To implement an Agile process and DevOps culture in the enterprise's IT, manually moving code from development to production may be time consuming and error prone. Also, in the case of failure at any step, it may be time consuming to undo the change and restore the previous stable version. If such an error occurs in a production environment, it may also directly impact the business's availability. On the other hand, we can think of CI/CD as an assembly line. The heart of CI/CD is writing or designing the CodePipeline.

Steps can be managed from the very beginning when a new piece of code is merged with the master branch from the development (usually, the master branch in the repository consists of the final code for use in the business) till the last step of deploying the compiled and tested software to the production environment. CI/CD stops the delivery of bad code to the production environment by embedding all the necessary tests, such as unit tests, integration tests, load tests, and so on, in the pipeline.

It is a best practice to carry out such tests on the test environment, which is identical to the production environment, to calibrate and test code more precisely. Implementing continuous delivery or continuous deployment is one of the options in CI/CD practices where passing builds are deployed directly to the production environment and application changes run through the CI/CD pipeline. Let's look at some basic terminology with the help of the following screenshot:

Basics of Continuous Integration

When CI is implemented, each of the developers in a team integrates their code into a main branch of a common repository several times during a day. AWS CodeCommit or third-party tools such as GitHub and GitLab can be used as a common source code repository to store developing code. Earlier, in traditional software, the development took place in isolation and was submitted at the end of the cycle. The main reason for frequently committing code several times to a main branch of a common repository is to reduce integration costs. Since, developers can identify conflicts between the old and the new code at an early stage, it is easy to resolve these conflicts and less costly to manage.

Any time developers commit a new code to the common branch at the common repository, no manual methods exist to make sure that the new code quality is good, doesn't bring any bug to the software, and doesn't break the existing code. To achieve this, it is highly recommended you perform the following automatic tasks every time a new change is committed to the repository:

Execute automatic code quality scans to make sure the new code adheres to enterprise coding standards.
Build the code and run automated tests

The goal of the CI is to make new code integration simple, easy, and repeatable to reduce overall build costs and identify defects at an early stage. Successful implementation of CI will make changes in the enterprise and will act as a base for CD. CI refers to the build and unit testing stages of the software release process. Every new release commit triggers an automated build and test.

Basics of Continuous Delivery

CD is the next phase of CI, and it automates pushing the applications to the various environments, from development to test and pre-production. It is also possible to have more than one development and testing environment for application changes that are staged for various individual tests and review. Even if code has passed all the tests, CD doesn't automatically push the new change to the production. But it makes sure that the code base is deployable and builds are ready to deploy to the production environment at any time.

Teams can be confident that they can release the software whenever they need to without complex coordination or late-stage testing. Amazon CodePipeline can be used to build pipelines, and Amazon CodeDeploy can be used to deploy newly built code to the various AWS compute services or in various environments from development to production.

In general, with the help of the CD release schedules (daily, weekly, fortnightly, or monthly) as per the business requirements, new features are deployed to production on these specific schedules. If the business permits, then develop software in small batches, as it is easy to troubleshoot if there is a problem

Continuous deployment : An extension of CD

Continuous deployment is an extension of continuous delivery. Continuous deployment automatically deploys each build and makes sure that the build has passed the full life cycle to the production environment. This method doesn't wait for human intervention to decide whether to deploy a new build to the production environment; as soon as it has passed the deployment pipeline, the build will be deployed to the production environment. The following diagram helps us understand this process:

The preceding diagram helps to understand the difference between continuous delivery and continuous deployment. Continuous delivery requires human intervention to finally deploy newly built software to the production. This method may help business people decide when to introduce a new change to the market. On the other hand, continuous deployment doesn't require any human intervention to deploy newly built software that has passed all the tests in the deployment pipeline and will be directly deployed to the production.

Based on the business needs, either of these models can be implemented in DevOps. It is important to understand that at least continuous delivery has to be configured to successfully implement DevOps.

AWS tools for CI/CD

At a higher level, the software development life cycle can be broken down into five steps, which are as source, build, test, deploy, and monitor, as shown in the following screenshot:

We will go through each of these steps in detail:

Source: At this first stage of the software development life cycle, developers commit their source code many times a day to a common branch in the common source code repository to identify integration errors at the early stages. Once a feature, development, bug fix, or hotfix is complete on the relevant branch, it will be merged with the master branch to release the development into production, passing through various environments, such as development and test, and passing all the tests specified in the CodePipeline.
Build: In an earlier stage, once development is peer reviewed and merged to the production, it usually triggers the build process. The source code will be fetched from the specified source code repository and branch, and the code quality will be checked against enterprise standards. Once the code quality is accepted, the code is ready to compile. If the source code is written in a compiler programming language such as Java, C/C++, or .NET, it will be converted to binary. This binary output is also called artifacts and is stored in the artifacts repository. The Docker container files are converted into the Docker container image and are stored to the container image repository.
Test: At this stage, artifacts are fetched from the artifacts repositories and deployed to one or more test environments to carry out one or more tests, such as load testing, UI testing, penetration testing, and so on. In general, it is recommended to have a test environment that's identical to the production environment in order to carry out precise tests.
Deploy: Once source code has been successfully passed through all the build and tests phases that are defined in the CodePipeline, it is ready to be deployed into production. In the case of continuous delivery, the source code will wait for human intervention before it is deployed into the production environment at the pre-defined released date. If continuous deployment has been configured, then it doesn't matter that an output artifact of one action is used in consecutive stages or some future stage. The code will be deployed to production automatically.
Monitor: Once the revised software has been deployed to production, it is time to monitor the application and infrastructure resources for the errors and resource consumption respectively. Now let's see the same software development life cycle with AWS services:

Looking at the preceding diagram, AWS services can be explained as follows:

AWS CodeCommit: This is a fully managed version control source code repository to host private Git repositories. It is well suited for most of the version control needs in enterprises. It doesn't have any limitations on file size, file type, or repository size.
AWS CodeBuild: This is a fully managed continuous integration service that compiles source code, runs tests, and produces software packages called artifacts. Artifacts are ready to deploy to production. It builds automatically to support running multiple builds concurrently. Each commit or merge to a master or configured branch will trigger an individual build process.
AWS CodeBuild + third-party tools: AWS CodeBuild can be used with third-party tools to satisfy custom build and test requirements.
AWS CodeDeploy: This is a fully managed deployment service that automates software deployment to AWS compute services such as Amazon EC2, AWS Farget, AWS Lambda, or on-premises servers. This service eases the frequent release of new application features by managing the complexity of updating applications. It eliminates the time-consuming and error-prone process of updating applications. It works seamlessly with various configuration management, source control, CI, continuous delivery, and continuous deployment tools.
AWS CodeStar: This combines various DevOps offerings from AWS web services under one roof, such as AWS CodeCommit, AWS CodeDeploy, AWS CodeBuild, and AWS CodePipeline. Each of these AWS web services can be used individually from their web console. But rather than jumping from one web console to another and dealing with individual resources in each of these AWS web services, AWS CodeStar provides a seamless experience by combining all the DevOps services in a single place as a project.
CodeStar provides a ready GUI-based step-by-step template to quickly and easily deploy DevOps for a new project. CodeStar provides a sample template for the web application, web service, Alexa skills, Static website, and AWS Config Rule using C#, Go, HTML 5, Java, Node.js, PHP, Python, or Ruby to deploy on AWS Elastic Beanstalk, Amazon EC2, or AWS Lambda.
AWS X-Ray: This service provides a platform to view, filter, and gain insights into the collected data to identify issues and optimization opportunities. AWS X-Ray helps developers to analyze and debug applications using distributed tracing. In a nutshell, this service helps us to understand the root cause of issues, errors, and bottlenecks in the application. The following screenshot is an example of application data collection and reporting:
Amazon CloudWatch: This is a service that monitors AWS resources and customer applications running on AWS in real-time. It is automatically configured to provide some default metrics for each AWS service. These metrics vary for each AWS service and resource type. It collects monitoring and operational data in the form of logs, metrics, and events.
AWS Cloud9: This is a rich cloud-based Interactive Development Environment (IDE) for writing, running, and debugging code in the web browser. It also has a built-in terminal preconfigured with AWS CLI. It saves you from installing and configuring an IDE on a developer's local machine. It also sets developers free to use the same IDE from any machine or device through a web browser. It is secured and also has collaboration features.

To summarize, CI/CD is a mechanism that optimizes and automates the development life cycle. This post introduced you to CI/CD on AWS and described how you can use it with your AWS workloads. To further understand Elastic Beanstalk and AWS Lambda, you can read the book AWS Certified Developer - Associate Guide - Second Edition by Packt Publishing.

Isolated unit testing and deep integration testing in Angular

Packt — Thu, 31 Oct 2019 08:05:55 +0000

Software testing is the process of evaluating the functionality of the application and checking whether the expected results match the actual results of the software. There are a lot of different ways software can be tested, varying from unit testing, integration testing, end-to-end testing, manual testing, accessibility testing, and so on.

This article is taken from the book Angular Projects by Zama Khan Mohammed. This book will be your practical guide when it comes to building optimized web apps using Angular. It explores a number of popular features, including the experimental Ivy rendered, lazy loading, and differential loading, among others. To follow along with the examples implemented in this article, you can download the code from the book’s GitHub repository?.

In this article, we will be looking at isolated unit testing and deep integration testing in Angular 8. We will take an already existing application built from the Angular CLI, which has no tests written for it, except for the default test files that were generated by the Angular CLI while generating different files. This is a simple application that uses the Behance API to display a collection of design projects.

Isolated unit testing

Isolated unit testing is the process of isolating a class or function and testing it as regular JavaScript code. In such test cases, we don't worry about the framework-specific stuff. We will be doing isolated unit testing for our?ColorNamerPipe?class, which looks as follows:


    
import { Pipe, PipeTransform } from '@angular/core'; 
import * as colorNamer from 'color-namer'; 

@Pipe({ 
    name: 'colorNamer' 
}) 
export class ColorNamerPipe implements PipeTransform { 
transform(value: any, args?: any): any { 
    return colorNamer(`rgb(${value.r},${value.g},${value.b})`).html[0].name; 
} 

}

We will test this code without worrying about the decorator on the class, that is,?ColorNamerPipe. What this pipe takes is an object with?r,?g, and?b?values and uses an?npm?module to return the name of the color.

The Angular CLI already initializes the test files for pipes as isolated unit tests. In the following code, we can see that Angular has prepared a basic test to check whether the pipe has been created:?


    
import { ColorNamerPipe } from './color-namer.pipe'; 

describe('ColorNamerPipe', () => { 
    it('create an instance', () => { 
        const pipe = new ColorNamerPipe(); 
        expect(pipe).toBeTruthy(); 
    }); 
});

Let's write our new test case, which will pass various values and check whether the pipe returns the correct value or not:


    
... 
describe('ColorNamerPipe', () => { 
    ... 
it('should return current color', () => { 
    const pipe = new ColorNamerPipe(); 
    let transformedValue = pipe.transform({ 
        r: 255, 
        g: 255, 
        b: 255 
    }); 
    expect(transformedValue).toEqual('white'); 

    transformedValue = pipe.transform({ 
        r: 255, 
        g: 0, 
        b: 0, 
    }); 
    expect(transformedValue).toEqual('red'); 
    transformedValue = pipe.transform({ 
        r: 0, 
        g: 255, 
        b: 0, 
    }); 
    expect(transformedValue).toEqual('lime'); 

}); 
});

In the preceding code, we are testing a particular block of code only. This is why it is called an isolated test case—because our test case is isolated only to one single feature. In this particular test case, we are testing whether the transformed value is returning as expected or not.?

Deep integration testing

Isolated unit tests are good when we are testing a class without depending on the integration of the framework that we are using. But when it comes to testing a class alongside the framework, then we need to use integration testing. In integration testing, we test the behavior of a class/function as a whole to ensure that it works cohesively with the framework.?

In deep integration tests, we let the framework run all the classes, just like it would do when it runs in its environment (such as a browser). We might want to mock some classes and functions, but overall we let the framework do most of the heavy lifting for us.

Angular uses dependency injection to create different Angular components, and it does so by using?@NgModule. For testing, Angular provides?TestBed, which can be used to create a?TestModule?that emulates Angular's?@NgModule.

Deep integration tests for the component

In this section, we will be performing an integration test on our component by mocking an observable with an expected type of data. This will help us understand whether the data that's passed is flowing properly in our component and that the expected result is being obtained. We have already successfully configured?TestModule?for?the spec of our?HomeComponent. Let's add some data to our?HomeComponent?and check whether we can find the items that are being displayed by the template:


    
beforeEach(() => { 
    fixture = TestBed.createComponent(HomeComponent); 
    component = fixture.componentInstance; 
    component.posts$ = of([{id: 1, name: 'Title 1', covers: {115: 'image
    1.jpg'}}, {id: 1, name: 'Title 2', covers: {115: 'image 2.jpg'}}]); 
    fixture.detectChanges(); 
});

Here, in beforeEach, before we call our fixture to detect changes in the component, we've added a couple of posts. Let's add a couple of tests to test whether it has added two cards in the DOM and if the first card's title is like it was in the data we passed:


    
describe('HomeComponent', () => { 
    ... 
    it ('show have 2 post cards', () => { 
        const cards = fixture.debugElement.queryAll(By.css('.card')); 
        expect(cards.length).toEqual(2); 
    }); 
it ('should have the title in the card', () => { 
    const cards = fixture.debugElement.queryAll(By.css('.card')); 
    expect(cards[0].query(By.css('.card- 
    text')).nativeElement.textContent) 
        .toEqual('Title 1'); 
}); 

});

By doing this, we have performed a deep test, which not only verifies whether the element with the card?class has been created but also checks whether the title matches in the first element.

Deep integration tests for the service

Our service,?BehanceService, uses?HttpClient?and has a couple of methods,?getPosts?and?getPost, both of which call an HTTP call. In our testing, we don't want to call the HTTP call and test the actual API. Instead, we need to mock the HTTP call. We already included?HttpClientTestingModule?in the?BehanceService?spec file, which will help us to mock the API so that the actual HTTP request doesn't go out. Instead, we return a mocked response:


    
describe('BehanceService', () => { 
    ... 
it('should call posts api', () => { 
    const response = 'response'; 
    const service: BehanceService = TestBed.get(BehanceService); 
    const httpMock: HttpClientTestingBackend =  
    TestBed.get(HttpTestingController); 

    service.getPosts().subscribe(data => { 
        expect(data).toEqual(response); 
    }); 

    const req = httpMock.expectOne( 
        (request: any) => { 
            return request.url === environment.api +  
            'collections/170716829/projects?per_page=20&page=' + 1 +  
            '&api_key=' + environment.token; 
        } 
    ); 

    expect(req.request.method).toEqual('JSONP'); 
    req.flush(response); 
}); 

});

Here, we have got the HTTP mock from?HttpTestingController. We call the?getPosts?method and expect the data to be returned with a response. Then, we use?httpMock?as we expect a URL to be called and then use?req.flush?to execute the call, which should run the expectation inside the subscription.

Let's also go ahead and test the?getPost?method in a similar fashion:


    
describe('BehanceService', () => { 
    ... 
it('should call post api', () => { 
    const id = 'id'; 
    const response = 'response'; 

    const service: BehanceService = TestBed.get(BehanceService); 
    const httpMock: HttpClientTestingBackend =  
    TestBed.get(HttpTestingController); 

    service.getPost(id).subscribe(data => { 
        expect(data).toEqual(response); 
    }); 

    const req = httpMock.expectOne( 
        (request: any) => { 
            return request.url === environment.api + 'projects/' + id +  
            '?api_key=' + environment.token; 
        }
    );

    expect(req.request.method).toEqual('JSONP');
    req.flush(response);
});

});

In these tests, we are following the preceding concept of doing a deep integration test, but on a service instead of a component. In this case, we are testing whether the response is equal to the mock response that we created. It also checks the type of request that was made. The deeper the integration test goes, the better, because it does a thorough check to ensure no bugs pass through.

This article walked you through the two different ways of testing your Angular application: isolated unit testing and integrated testing. While isolated unit testing tests a class or function in isolation as regular JavaScript code, deep integration testing lets you test a class alongside a framework.

If you found this post useful, do check out the book, Angular Projects by Packt Publishing. In this book, you will explore Angular 8 and its latest features including Ivy renderer, Lazy loading and differential loading by building 9 different projects.

How to use V-Masks when building forms with Vue.js

Packt — Wed, 30 Oct 2019 10:34:51 +0000

One of the key aspects of any successful form is clarity. If the user finds the form easy to use and easy to understand, they are more likely to fill it in, and submit it. In this chapter, we are going to be looking at input masking. You will learn how to quickly and easily apply masks to your form inputs, and to configure them to your needs with real-life examples, such as telephone numbers.

This is an extract taken from Building Forms with Vue.js written by Marina Mosti (@MarinaMosti.) To access the code that forms the basis of the projects found throughout the book, click here.

Marina is speaking at VueConf in Toronto in November. Learn more here.

What exactly are input masks? They are predefined structures that display the data for an input. For example, if you were going to mask a telephone input, you'd probably want it to display as (123) 234-5555, instead of simply, 1232345555. You can clearly see that the first example is not only easier to read, but it also conveys meaning about what the field is trying to accomplish.

Input masks are a nice feature to take your UX to another level, and they are very easy to implement, thanks to open source libraries such as v-mask. The GitHub repository page can be found here.

How to install the v-mask library

Let's get started with the installation of the v-mask library. In order for our project to use what it has to offer, we first need to add it to our project dependencies. Follow these steps in order to do this:

Open up your Terminal, and type in the following command to add the library to our dependencies:

> npm install v-mask

We need to add it to Vue as a plugin, so head to main.js, and let's both import it, and let Vue know that we want to register it as a plugin for all of our apps. Add the following code, after the import App line:

import VueMask from 'v-mask' Vue.use(VueMask);

Now that we have registered our plugin, we have access to a new directive: v-mask. We can add this new directive directly onto our elements, and the library will handle the masking behind the scenes by reading the users' input, and adjusting the display of the field.

Let's try this on a regular input first, then we will add some props to our project's component.

Go to App.vue, and create a new element after the email input:

<input type="text" />

If we were to type in a phone number in this field as it is, we would get the default input behavior. Anything goes. So, let's apply a telephone number mask to it. Our new v-mask library has a requirement that every field that we apply it to needs to be v-modeled, so let's get that done first.

Add a new telephone prop to our data() inside of the form object:

form: {
...
telephone: ''
},

Now, go back to our new element, and apply v-model. We are also going to now add the v-mask directive, shown as follows:

<input type="text"
v-model="form.telephone" v-mask="'(###)###-####'"
>

Go back to your browser, and try the input once again. As you type, you will see that you are actually getting it nicely formatted to what we would expect for a telephone number.

In five simple steps, we have added input masking to one of our form fields. Now let’s take a look in more depth at what the v-mask directive does.

What is a directive?

When we added the v-mask library to our project, and added the plugin within main.js, the library created a new directive for us, v-mask. What exactly is a directive, though? We know it looks like an HTML attribute, but what else?

Directives are special attributes with the v- prefix. Directive attribute values are expected to be a single JavaScript expression (with the exception of v-for […]). A directive's job is to reactively apply side effects to the DOM, when the value of its expression changes.
Official Vue docs.

Okay, so it looks like we have a special attribute that can modify the element. That sounds exactly like what we saw happen, when we applied to the input element. But, how does the actual expression or value that we are putting into this directive work?

We know from the example that we are passing in a string, and you can see that inside the double quotes that make up the v-mask="" attribute, we are setting a new pair of single quotes ('). This means that the expression inside this attribute is JavaScript, and that we are passing it a string value.

From looking at the v-mask library documentation, we know that we have a few special placeholder characters that we can use inside our masks. The table for those is as follows:

Take for example, a mask that will display the time of the day. You could define it as follows:

v-mask="'##:##'"

This means that this input will take two numbers from 0 to 9 (##), followed by a :
character, followed by another two numbers (##).

Anything that does not match this pattern, will be ignored by the input.

v-mask is a very powerful library that allows us to customize exactly how we want our input to be displayed, by combining these simple rules. In the final section of this post, we’ll look at how to modify custom inputs. This will allow us to fully leverage the power of the input masks.

How to enhance custom inputs
We have put in a lot of work to create our awesome custom BaseInput, so we definitely want to keep using it!

Follow these steps in order to modify the BaseInput, and to allow for input masking:

Go back to App.vue, and switch the element for a component:

<BaseInput label="Telephone"
type="text"
v-model="form.telephone"
/>

Let's go into BaseInput.vue now, and create a new prop; we will call it mask, and it will default to an empty string. It is important that we default it to an empty string, or else the directive will try to match, and we won't be able to type into the fields if they don't have a declared mask!

Add it to your props object:

...,
mask: {
type: String, required: false
}

Now, go back to App.vue, and update our telephone BaseInput to use the mask attribute:

<BaseInput label="Telephone" type="text"
v-model="form.telephone"
:mask="'(###)###-####'"
/>

All done! Return to your browser, and add some numbers to the field, and you should have a nice-looking telephone mask working with your custom component!