6099928923

In this article you will learn about Progressive Web Applications (PWA), particularly the process to convert your Angular app into a PWA. PWA is an option used to make regular web applications act like native apps on Android, Windows, Chrome OS and more. Progressive Web Apps are not a new technology, but lately, they are getting much more attention after Microsoft announced they are supported by Windows. They are also available in Chrome, Firefox, and Safari.

What Does PWA Mean?

Progressive Web Application refers to a set of characteristics implemented by actual applications that allow you to improve the user experience.

Let’s review each characteristic:

  • Application Manifest: A manifest is a json file that describes the settings of the application such as author, description icon, start screen, etc.
  • Service Workers: Using Service Workers allows you to improve the load time of the app by using different caching strategies for assets, and even API requests.
  • Application Shell: The application shell architecture is commonly used to create PWAs. It refers to the HTML, CSS, and JavaScript, each required by the web app to load the skeleton and activate the user interface. This means it will also work offline. Local resources can be cached to ensure performance. Using the app shell is not a mandatory requirement for building PWAs, but it’s highly recommended since important performance gains can be achieved when resources are cached and served correctly.

To fulfill all these requirements Angular allows us to create a PWA from scratch, in a fast and easy way. Let’s review the simple steps to make it happen.

Step 1: Angular CLI Set Up

Angular CLI is the standard command line tool used to create, debug and publish Angular applications. The easiest way to transform your app into a PWA is by using Angular CLI.

Once you have it installed you can create your new project with:

There is nothing new about this, you’ve probably done it in the past. You have just created a new Angular application with the help of the Angular Command Line Interface.

Step 2: Add Service Workers

Inside your current app directory (/AngularPWA) run the following command:

As a result, this command adds two files to our project, ngsw-config.json and manifest.json both required to transform our app into PWA. It also modifies the angular.json file adding the value “serviceWorker”: true. The index.html of our app now includes a reference to the manifest.json.

These updates are necessary, they allow the browser to consider the app as a PWA.

Here is a description of each one of these files:

  • ngsw-config.json: This is the configuration file for the service worker. It is used to configure the different caching strategies.
  • manifest.json: This is the PWA manifest. Basically, the file generated with all of the app resources (for example icon, name, theme, etc.)

Filling The Manifest

The manifest file contains the metadata of the application and is used when you install the PWA. It is also used for displaying the splash screen.

Here you will find a description of some of the most important fields:

  • name: Displayed on the splash-screen below the app icon.
  • short_name: Displayed below the shortcut on the desktop or on the home screen.
  • theme_color: The general theme color of the application, used in the status bars if they are displayed.
  • background_color: The background color of the splash screen.
  • display: Specifies the display mode.
  • standalone: In this mode some browser components (for example UI elements for controlling navigation) are excluded and the application takes the whole screen. This makes the screen look and feel similar to a standalone application.
  • icons: Array of icons in different sizes for each of the supported resolutions.

Here is a sample manifest file:

After filling the manifest you can configure the service worker.

Configuring The Service Worker

Angular provides the file to configure service workers rather than coding it on your own.

As described before, the ngsw-config.json file has all the defined configuration for the service worker and it is used to configure the different caching strategies.

This file, like the manifest, is also a JSON object and has four entries, described here:

  • index: Index page for navigation requests. Usually index.html.
  • assetsGroups: Specifies the resources files that are part of the app. Here you can also define the policy by which they are cached. For example:
    Resources that are always cached (“installMode”: “prefetch”)
    Resources cached when loaded (“installMode”: “lazy”)
  • dataGroups: refers to the resources that are obtained by data requests and are not part of the app itself. The two different strategies: cache first with network fallback (“strategy”: “performance”) and network first with cache fallback (“strategy”: “freshness”)
  • appData: Allows to pass data that describes the current version of the app.

Testing The Resulting App

To see if everything is working and to make your app working run the command:

Basically, it generates the dist folder, nothing rare about that, but pay attention to these three files:

  • manifest.json and ngsw-worker.js: were already described before.
  • worker-basic.js.: this script enables the usage of the service worker.

These files are the ones that allow you to run your app with service workers enabled.

Run a local server to preview your app. In this case, I’m using http-server, and open the Application tab of the browser web developer tools.

How to Turn Your Angular App into a Progressive Web App

Now you can see that the service worker is active and working.

Check the offline option and reload the browser. By opening the Network tab you can see that the files are being cached correctly.

How to Turn Your Angular App into a Progressive Web App

Quite simple, right? Now you have your Angular PWA application running.

You now have seen how to add PWA features to your Angular application. PWA applications allow you to expand your web page app to a whole new market and in doing so, to obtain more users. You can improve the user experience since your app resembles a native app and all of this facilitated by the usage of Angular tools. We hope you’re able to move on a step forward in the development of your first PWA with Angular.

(716) 400-1715

en flag
es flag

Listen to This Post

Voiced by Amazon Polly
Angular Architecture

I’m excited to announce the release of my next course on Pluralsight titled Angular Architecture and Best Practices! The goal of this course is to provide you with solid, proven guidance to plan out your Angular application architecture, address various challenges that typically come up, and ultimately create a more maintainable and flexible application.

Here are a few questions this course will help you answer:

  • Is there one “right” way to architect and build an Angular application? Short answer – NO!
  • What are some key concepts I should consider when planning my application architecture?
  • Is there any type of planning template I can use to help my team get started?
  • Is it important to think through the organization of  modules or should I put everything in the root module?
  • What’s the difference between shared and core modules?
  • How do I structure components? What if I have deeply nested components?
  • How should I organize my application features?
  • How do I communicate between components? What if I need to communicate across multiple levels of an application?
  • What best practices should I be following throughout my application?
  • Do I need a state management solution? What are some of the available options and how do they compare?
  • What is an observable service and how would I create and use one?
  • Can reference types and value types have different affects on my application behavior?
  • How do I share code in my application? What if I need to share code between multiple applications?
  • What’s an RxJS subject? Is there more than one type of subject?
  • How can I use forkJoin, concatMap, switchMap, mergeMap, and other RxJS operators to make more efficient calls to the server?
  • Where should I consider using HTTP Interceptors in my app?
  • Is it OK to call component functions from a template? Are there alternatives I should consider?
  • What different techniques can be used to unsubscribe from observables?
  • What are some key security considerations I should be thinking about?
  • And much more…

Here’s a summary of the course…

There are a lot of questions out there about the core concepts of Angular, such as whether or not you’re following established best practices, how easy will it be to maintain and refactor the application in the future, how do I structure my features, modules, components, services, and more? Whether you’re starting a new application from scratch or updating an application, what application architecture should be used?

In the Angular Architecture and Best Practices course you’ll learn about different architectural concepts, best practices, and techniques that can be used to solve some of the more challenging tasks that come up during the planning and development process. You’ll learn about a planning template that can be used to provide a simple and efficient way to get started. Discover different component communication techniques, walk through state management and code organization options. Finally, you’ll explore general best practices, performance considerations, and much, much more.

When you’re finished with this course, you’ll have the skills and knowledge  needed to think through the process of building a solid application that is easy to refactor and maintain.

  1. Course Overview
  2. Introduction
    • Introduction
    • Prerequisites to Maximize Learning
    • Key Concepts and Learning Goals
    • Sample Application and Software Requirements
    • Course Overview
  3. Planning the Application Architecture
    • Introduction
    • Architecture Considerations
    • Architecture Planning Template
    • Architecture Planning Template Example
    • The Angular Style Guide
    • Other Considerations
    • Summary
  4. Organizing Features and Modules
    • Introduction
    • Organizing Features
    • Feature Modules
    • Core and Shared Modules
    • Core and Shared in Action
    • Creating a Custom Library
    • Consuming a Custom Library
    • Putting All the Modules Together
    • Summary
  5. Structuring Components
    • Introduction
    • Container and Presentation Components
    • Container and Presentation Components in Action
    • Passing State with Input and Output Properties
    • Input and Output Properties in Action
    • Change Detection Strategies
    • Reference vs. Value Types
    • Cloning Techniques
    • Cloning in Action
    • Cloning with Immutable.js
    • Component Inheritance
    • Component Inheritance in Action
    • Summary
  6. Component Communication
    • Introduction
    • Component Communication
    • Understanding RxJS Subjects
    • RxJS Subjects in Action – Part 1
    • RxJS Subjects in Action – Part 2
    • Creating an Event Bus Service
    • Using an Event Bus Service
    • Creating an Observable Service
    • Using an Observable Service
    • Unsubscribing from Observables
    • Summary
  7. State Management
    • Introduction
    • The Need for State Management
    • State Management Options
    • Angular Services
    • NgRx
    • NgRx in Action
    • ngrx-data
    • ngrx-data in Action
    • Observable Store
    • Observable Store in Action
    • State Management Review
    • Summary
  8. Additional Considerations
    • Introduction
    • Functions vs. Pipes
    • Functions and Pipes in Action
    • Using a Memo Decorator
    • HttpClient and RxJS Operators
    • Key Security Considerations
    • HTTP Interceptors
    • Summary
  9. Course Summary

There’s a lot of thought and planning that goes into any application. While there are many opinions out there on how to architect an app, I hope the course provides you with additional insight into the process.

How to Build a Simple Mobile App with React Native

An International Space Station Image Viewer

React Native (RN) is one of the most exciting tools in the ever-expanding landscape of mobile development technologies. Many frameworks give developers the ability to build cross-platform apps with web technologies (think Ionic, Flutter, Xamarin, etc.), but none can boast the same performance benchmarks, vibrant community, or adoption rate, making React Native a viable option for nontrivial apps.

Being a Facebook framework, they are unsurprisingly using it for their main iOS and Android mobile apps, as well as other platforms like Instagram, Facebook Ads Manager, and Facebook Analytics. Many other big companies with robust active user rates have gotten on board with React Native, too, though, including Walmart, Pinterest, Uber, Tesla, and Skype.

Getting going with React Native can be tricky at first, but once you’re set up, you might be surprised at how quickly you can get a basic app off the ground.

Follow along below to see how we got a basic International Space Station image viewing app together by making just a few changes to a single file in React Native’s starter template. When we’re done, we’ll have an app that looks like the image below.

React Native Example App Tutorial

Note: This tutorial assumes some basic knowledge of JavaScript and ES6 syntax. If you are not familiar with both, check out Eloquent JavaScript

Up and Running

First, let’s cover some basic requirements for this tutorial.

We’re going to be building an iOS app, and right now, the only way to do that in RN is on a Mac. So, you’ll need access to one to complete the tutorial, as is.

Note: With a couple of initialization changes, you could easily complete this tutorial using the fantastic Expo online simulator and toolchain, including a CLI and an SDK. Keep in mind that you would almost never use Expo to build a real-world app, but it is a great way to get going, especially if you don’t have access to an Apple environment.

Installing Requirements

Also, you’ll need to install a few requirements to start using React Native locally. The React Native site has the steps listed, but briefly, you’ll need:

Once you have all of these applications installed, you should be ready to initialize a new React Native project. At the command line, type:

Once that has finished running, you should have a directory full of items looking something like this:

Note: The other way to initiate a React Native project from the command line is by installing the aforementioned Expo toolchain option, expo-cli. If you’re interested in using that to get going, the official docs have a great tutorial.

Running the Initial App

Let’s change into that directory and fire up the iOS simulator:

You’ll see a lot of action in the terminal, and then, your iOS simulator will pop up along with a Metro Bundler window, the JavaScript bundler for RN. The simulator will look like this once fully loaded:

React Native Example App Tutorial

So, now we have a running app in the simulator. It’s not much to look at, but it makes for a decent starting point. Let’s open up the App.js file and see what we have in there:

This is the file creating the welcome message in our simulator, and this is where your React knowledge starts to kick in.

Scanning through the code, we see:

  • Imports
    • One line importing React and Component
    • One line importing four components from React Native
  • instructions variable, which uses the RN Platform component to show different instructions for iOS and Android
  • A Flow type argument: type Props = ;
    • Flow is a static type checker for JavaScript. We won’t be using it in this tutorial, but it’s a must for anything nontrivial in React Native or React.
  • Next, we have an App component that returns some JSX, which is an XML-like syntax extension of JavaScript. JSX is used in the React ecosystem to describe a UI when rendering a component. In this case, it’s showing the rest of the text we see on the screen along with the instructions variable.
  • Last, we have a styles variable that uses the StyleSheet RN component to, you guessed it, style our UI. It works very much like standard CSS.

Building Our App

Now that we’ve reviewed what React Native gives you to start, let’s delete a bunch of it.

We’ll modify the comments, remove a few RN imports that we won’t be needing, delete the instructions variable, clear out all the JSX, and also, delete two of the three style objects in styles.

Alright. Now that we have a relatively blank slate, let’s review what we want our app to do:

  • We want to pull in some images of the International Space Station from the web.
  • We want to display one image at a time.
  • We want to be able to cycle through them in both directions by touching either the left or right side of the current image.
  • We want to include a caption for each image.

Pretty straightforward, with just enough complexity to make it interesting. Let’s get going.

Grabbing Images

We’re going to grab a few images from Imgur and put them in an array of objects. Each one has the URL of the image we want, and a caption for each one.

Styling Our App

Before we start in on the logic for our app, let’s make a few style changes so it looks right when we start pulling everything together.

First, we need to change the background color. We really don’t need to, technically, but white is a little boring, so we’ll add a new hex value to backgroundColor.

Then, we’ll add two new style objects for our images and captions.

React Native uses flexbox to arrange the layout. The numbers determine which component to prioritize when rendering. We’re giving the container priority over the image since we want the image inside the container when the app renders.

The Class Constructor & Initializing State

If you’re familiar with React, you already know all about the class constructor, but if not, let’s quickly cover what it is and why we use it.

The class constructor is used to initialize local state inside a component. A component’s state is its rendered value. It’s what’s currently happening in the UI.

Once we initialize the App component’s state, we can use it to make changes to our UI and keep track of those changes.

Let’s set our state to index: 0, so we can use the first image as a starting point in our array of images.

Next, we need to create an image variable inside the render() method that links our state to the first image in the StationImages array.

We’ll also add some JSX that will show our first image on the screen.

Note: We’re using ImageBackground in the JSX, which is a React Native component for displaying nested images inside the View component. Make sure you add it to your React Native imports at the top, or you’ll get an error.

Events & Changing State

In order to get the functionality for our app that we want, we need to add another value to our state and a couple of event methods to the App component.

  • newImage(event)
  • onNewLayout(event)

First, we added imageWidth to our initial state and set it to null. This will help us keep track of the different image widths as we cycle through them on the screen.

Next, we created a newImage event, which takes the current index and imageWidth of the current image, calculates where the image is touched (on the left half or the right half of the image), and either moves forward or back one image in the array.

The onNewLayout event is simply there to update imageWidth with (that’s right) the newest image’s width and keep track of it.

TouchableHighlight & Updating JSX

Now, we’re ready to make the changes to our UI so we can use our methods.

We’ll be using TouchableHighlight, which is a React Native component used to wrap touchable areas. Make sure you add it to your React Native imports at the top and let’s see it in action:

We’re using the onPress handler in TouchableHighlight to bind this to newImage. This is what connects the code we just wrote to the UI.

Also, notice the onLayout event handler in ImageBackground, which we’re using to update our onNewLayout event. onLayout is a React Native method that is called anytime the app layout is rendered.

Review & Recap

At this point, you should have a working app that is showing our first image of the space station and allows you to click on either half of the images to see a new picture.

Just so you don’t have to scroll back up the page, it should look like this:

React Native Example App Tutorial

And, you should have an App.js file that looks like this:

And, that concludes our React Native tutorial!

This is a very minimal example, but it should give you an idea of the framework’s possibilities and what you can accomplish with just a few changes to a single file.

We hope this gets you excited to learn more about React Native and how you can leverage your JavaScript skills to build high-performance cross-platform apps.

If you would like to learn more, the React Native site is a great starting point. Also, it is an open source project and one known to be friendly to first-timers, so be sure to check out the repo to see if you can help out with the project!

Happy coding!

8 Tips to Maximize Your Productivity – Code with Dan Blog

en flag
es flag

Listen to This Post

Voiced by Amazon Polly

Getting things done has always been a challenge for most people – and I include myself – regardless of where you work or what you do. No matter how hard some people try, they end up procrastinating tasks until the last minute. Some people simply focus better when they know they’re out of time and can’t procrastinate any longer. How many times have you put off working on a term paper in school until the very last minute? With only a few hours left your mental energy and focus seem to kick in to high gear especially as you realize that you either get the paper done now or risk failing. It’s amazing how a little pressure can turn into a motivator and allow our minds to focus on a given task.

Some people seem to specialize in procrastinating just about everything they do while others tend to be the “doers” who get a lot done and ultimately rise up the ladder at work. What’s the difference between these types of people? Is it pure laziness or are other factors at play? I think that some people are certainly more motivated than others, but I also think a lot of it is based on the process that “doers” tend to follow – whether knowingly or unknowingly.

While I’ve certainly fought battles with procrastination, I’ve always had a knack for being able to get a lot done in a relatively short amount of time. I think a lot of my “get it done” attitude goes back to the the strong work ethic my parents instilled in me at a young age. I remember my dad saying, “You need to learn to work hard!” when I was around 5 years old. I remember that moment specifically because I was on a tractor with him the first time I heard it while he was trying to move some large rocks into a pile. The tractor was big but so were the rocks and my dad had to balance the tractor perfectly so that it didn’t tip forward too far. It was challenging work and somewhat tedious but my dad finished the task and taught me a few important lessons along the way including persistence, the importance of having a skill, and getting the job done right without skimping along the way.

In this post I’m going to list a few of the techniques and processes I follow that I hope may be beneficial to others. Most of the ideas that follow came from learning and refining my daily work process over the years. However, since most of the ideas are common sense (at least in my opinion), I suspect they can be found in other productivity processes that are out there. Let’s start off with one of the most important yet simple tips: Start Each Day with a List.

1. Start Each Day with a (realistic) List

What are you planning to get done today? Do you keep track of everything in your head or rely on your calendar? While most of us think that we’re pretty good at managing “to do” lists strictly in our head you might be surprised at how effective writing out lists can be. By writing out tasks you’re forced to focus on the most important tasks to accomplish that day, commit yourself to those tasks, and have an easy way to track what was supposed to get done and what actually got done.

Start every morning by making a list of specific tasks that you want to accomplish throughout the day (some people like to write them out the night before). I’ll even go so far as to fill in times when I’d like to work on tasks if I have a lot of meetings or other events tying up my calendar on a given day.

I’m not a big fan of using paper since I type a lot faster than I write (plus I write like a 3rd grader according to my wife), so I use the sticky notes feature available in Windows and Mac. Here’s an example of today’s sticky note:

If you prefer “to do” lists instead of sticky notes, there are a ton of apps out there to help with that. One of my favorites is Any.do. What do you add to your list? That’s the subject of the next tip.

2. Focus on Small Tasks

It’s no secret that focusing on small, manageable tasks is more effective than trying to focus on large and more vague tasks. When you make your list each morning only add tasks that you can accomplish within a given time period. For example, if I only have 30 minutes blocked out to work on an article I don’t list “Write Article”. If I do that I’ll end up wasting 30 minutes stressing about how I’m going to get the article done in 30 minutes and ultimately get nothing done. Instead, I’ll list something like “Write Introductory Paragraphs for Article”. The next day I may add, “Write first section of article” or something that’s small and manageable – something I’m confident that I can get done. You’ll find that once you’ve knocked out several smaller tasks it’s easy to continue completing others since you want to keep the momentum going.

In addition to keeping my tasks focused and small, I also make a conscious effort to limit my list to 4 or 5 tasks initially. I’ve found that if I list more than 5 tasks I feel a bit overwhelmed which hurts my productivity. It’s easy to add additional tasks as you complete others and you get the added benefit of that confidence boost of knowing that you’re being productive and getting things done as you remove tasks and add others.

3. Getting Started is the Hardest (Yet Easiest) Part

I’ve always found that getting started is the hardest part and one of the biggest contributors to procrastination. Getting started working on tasks is a lot like getting a large rock pushed up and over a hill. It’s difficult to get the rock rolling at first, but once you manage to get it rocking some it’s really easy to get it rolling on its way to the bottom. As an example, I’ve written 100s of articles for technical magazines over the years and have really struggled with the initial introductory paragraphs. Keep in mind that these are the paragraphs that don’t really add that much value (in my opinion anyway). They introduce the reader to the subject matter and nothing more. What a waste of time for me to sit there stressing about how to start the article. On more than one occasion I’ve spent more than an hour trying to come up with 2-3 paragraphs of text. Talk about a productivity killer!

Whether you’re struggling with a writing task, some code for a project, an email, or other tasks, jumping in without thinking too much is the best way to get started I’ve found. I’m not saying that you shouldn’t have an overall plan when jumping into a task, but on some occasions you’ll find that if you simply jump into the task and stop worrying about doing everything perfectly that things will flow more smoothly. For my introductory paragraph problem I give myself 5 minutes to write out some general concepts about what I know the article will cover and then spend another 10-15 minutes going back and refining that information. That way I actually have some ideas to work with rather than a blank sheet of paper. If I still find myself struggling I’ll write the rest of the article first and then circle back to the introductory paragraphs once I’m done.

To sum this tip up: Jump into a task without thinking too hard about it. It’s better to to get the rock at the top of the hill rocking some than doing nothing at all. You can always go back and refine your work.

4. Learn a Productivity Technique and Stick to It

There are a lot of different productivity programs and seminars out there being sold by companies. I’ve always laughed at how much money people spend on some of these motivational programs/seminars because I think that being productive isn’t that hard if you create a re-useable set of steps and processes to follow. That’s not to say that some of these programs/seminars aren’t worth the money of course because I know they’ve definitely benefited some people that have a hard time getting things done and staying focused.

One of the best productivity techniques I’ve ever learned is called the Pomodoro Technique and it’s completely free. This technique is an extremely simple way to manage your time without having to remember a bunch of steps, color coding mechanisms, or other processes. The technique was originally developed by Francesco Cirillo in the 80s and can be implemented with a simple timer. In a nutshell here’s how the technique works:

  1. Pick a small task to work on
  2. Set the timer to 25 minutes and work on the task
  3. Once the timer rings record your time
  4. Take a 5 minute break
  5. Repeat the process

Here’s why the technique works well for me:

  • It forces me to focus on a single task for 25 minutes. In the past I had no time goal in mind and just worked aimlessly on a task until I got interrupted or bored. 25 minutes is a small enough chunk of time for me to stay focused. Any distractions that may come up have to wait until after the timer goes off. If the distraction is really important then I stop the timer and record my time up to that point.
  • When the timer is running I act as if I only have 25 minutes total for the task (like you’re down to the last 25 minutes before turning in your term paper….frantically working to get it done) which helps me stay focused and turns into a “beat the clock” type of game. It’s actually kind of fun if you treat it that way and really helps me focus on a the task at hand. I automatically know how much time I’m spending on a given task (more on this later) by using this technique.
  • I know that I have 5 minutes after each pomodoro (the 25 minute sprint) to waste on anything I’d like including visiting a website, stepping away from the computer, etc. which also helps me stay focused when the 25 minute timer is counting down.

There are certainly many other productivity techniques and processes out there (and a slew of books describing them), but the Pomodoro Technique has been the simplest and most effective technique I’ve ever come across for staying focused and getting key tasks done each day. While you don’t need an app to use this technique, there are several apps out there if you’re interested.

5. Persistence is Key

Getting things done is great but one of the biggest lessons I’ve learned in life is that persistence is key especially when you’re trying to get something done that at times seems insurmountable. Small tasks ultimately lead to larger tasks getting accomplished, however, it’s not all roses along the way as some of the smaller tasks may come with their own share of bumps and bruises that lead to discouragement about the end goal and whether or not it is worth achieving at all.

I’ve been on several long-term projects over my career as a software developer (I have one personal project going right now that fits well here) and found that repeating, “Persistence is the key!” over and over to myself really helps. Not every project turns out to be successful, but if you don’t show persistence through the hard times you’ll never know if you succeeded or not. Likewise, if you don’t persistently stick to the process of creating a daily list, follow a productivity process, etc. then the odds of consistently staying productive aren’t good.

6. Track Your Time

How much time do you actually spend working on various tasks? If you don’t currently track time spent answering emails, on phone calls, browsing the Internet, and working on various tasks then you might be surprised to find out that a task that you thought was going to take you 30 minutes ultimately ended up taking 2 hours. If you don’t track the time you spend working on tasks how can you expect to learn from your mistakes, optimize your time better, and become more productive? That’s another reason why I like the Pomodoro Technique – it makes it easy to stay focused on tasks while also tracking how much time I’m working on a given task.

7. Eliminate Distractions

I blogged about this tip several years ago but wanted to bring it up again. If you want to be productive (and ultimately successful at whatever you’re doing) then you can’t waste a lot of time playing games or be on Twitter, Facebook, or other time sucking websites. If you see an article you’re interested in that has no relation at all to the tasks you’re trying to accomplish then bookmark it and read it when you have some spare time (such as during a pomodoro break). Fighting the temptation to check your friends’ status updates on a social media site? Resist the urge and realize how much those types of activities are hurting your productivity and taking away from your focus.

I’ll admit that eliminating distractions is still tough for me personally and something I have to constantly battle. But, I’ve made a conscious decision to cut back on my visits and updates to social media and other sites.

Ultimately it comes down to self-discipline and how badly you want to be productive and successful in your career, life goals, hobbies, or whatever you’re working on. Rather than having your homepage take you to a time wasting news site, game site, social site, or others, how about adding something like the following as your homepage? Every time your browser opens you’ll see a personal message which helps keep you on the right track. You can download my ubber-sophisticated homepage here if interested.

Don't Waste Time Clock Image

If you want a tool to help eliminate distractions (while also helping you stay focused for a set period of time) check out Forest: stay focused, be present. You can use it with iOS, Android or as a Chrome extension. There are a lot of additional tools out there to block you from going to time wasting sites while you’re trying to focus as well.

8. Learn to Relax

This final tip is arguably one of the most important to maximize your productivity in my opinion. There are many studies out there touting the benefits of stress and anxiety reduction on productivity and creativity. We all know that unhealthy stress and anxiety can reduce our productivity but how many of us take action? In today’s stressed-out world it’s more important than ever to work on this skill. It’s something that takes practice for many of us and requires a lot of effort, but it’s totally worth the time investment in my experience. It may sound a bit “out there”, but learning to quiet your mind might be one of the best things you’ll ever do for yourself.

So how do you learn to relax? Every person is unique, so I can’t necessarily answer the question for you personally. What I can do is share a few techniques that I like to use. I’m going to be as brief as possible here since this is a big topic (maybe I’ll do another post that focuses on this and how it’s change my life for the better).

While some people are naturally relaxed and calm most of the time, I’ve always been a bit of a high stress/anxious person that tends to worry about things that are often out of my control. In 2nd grade I was given the “Head Worry Wart” award at the end of the school year (no joke – I actually received an award certificate for that believe it or not). At the time I was proud that I received an award, but now I laugh a bit as I look back and realize that the “award” was an early warning sign that I needed to relax and worry less.

For nearly 40 years I felt like I had no control over my stress and anxiety/worry and reached a point where I felt like I was at the bottom of a hole that I could never get out of – I just felt trapped in my own stress and didn’t know how to stop or even reduce it  aside from exercising. I finally reached a point where I realized I had to make a change. I’ve run my own software and training company for nearly 20 years now and while I wouldn’t change that aspect of my life, it does add some additional stress and worry. I realized that reducing stress/anxiety/worry was a skill that I needed to develop and enhance. As with learning any skill, practice and hard work is required.

I read book after book, article after article, listened to audiobooks, watched YouTube videos about reducing stress/anxiety/worry, talked with people who I felt had already mastered the skill, and finally decided that the key to reducing stress for me was learning to be mindful about how I was feeling. If you’re new to mindfulness, in a nutshell it’s learning to be aware of how you’re feeling in the present moment. That means being aware of how your body feels (emotions, any pain you’re feeling, your heart rate, etc.) as well as what thoughts you’re thinking.

I wasn’t truly aware any of these things aside from the fact that I felt stressed out a lot. One negative thought could trigger a cascade of negative thoughts which spiraled out of control at times, leading to a lot of unnecessary stress and worry, and a huge decrease in productivity. My mind was often like a runaway train that I didn’t even realize was running away. In talking with others I’ve come to realize that I’m not alone here.

While learning to be more mindful is a big topic that many articles, books, and scientific studies have addressed, here’s what I ended up doing:

  1. I practiced monitoring and analyzing what I was thinking about and how I was feeling in different situations every day. This is extremely hard to do until you practice it day after day especially given that our brains normally jump around a lot (something called the “monkey mind”). You have to consistently remind yourself to “check-in” throughout the day and monitor what you’re thinking about and how you’re feeling.If I find I’m ruminating over something stupid (especially things that are made up and/or out of my control), I shift my thoughts to something more beneficial, take a few deep breathes, or use other techniques. If I sense that I’m getting upset over a situation (code that isn’t working, a difficult topic to learn, a challenging client or meeting, etc.) I note how I’m feeling and employ some of the tactics that help me relax and get back to being productive.
  2. To get better at mindfulness and controlling my thoughts I started actively quieting my mind by meditating on a consistent basis. I’ll have to admit that I laughed at the concept of meditation earlier in life and thought it was for monks (no offense to any monks out there – I now have a ton of respect for the skills you’ve learned :-)). In hindsight, I just didn’t know what I didn’t know when it came to meditation.Meditation was extremely hard for me at first. Try sitting in a quiet room for 60 seconds and keeping your mind clear of any thoughts – don’t think anything! For newbies, within a few seconds your mind will start thinking about something and you won’t even realize it. By learning to quiet your mind you can relax and develop greater productivity and creativity as a result. You’ll also learn to be more mindful about what you’re thinking and feeling. This doesn’t mean you ignore any thoughts that come up while meditating. Instead you note them and go back to focusing on something else like your breathing, a mantra, etc. You can find a list of meditation techniques here.
  3. Use an app to get started with meditation rather than trying to go it alone. There are many meditation techniques out there as mentioned earlier, but if you’re interested in getting started meditating I recommend apps such as Insight Timer, Welzen, Headspace, or Aware. I alternate between several apps and even use breathing apps like Pranayama. Here are some of the apps I have loaded on my phone:

So has meditating and being more mindful helped my productivity? I can say “Yes” with 100% confidence. It’s helped me eliminate a ton of stress, anxiety, and worry and made me much more productive (especially in stressful situations) and more creative overall. When I’m stuck on something, I recognize how I’m feeling and what I’m thinking and typically step away for a few minutes (I used to suffer through the problem until it was solved which wasn’t very efficient). I’ve seen many other benefits as well in my life but that’s a topic for another blog post.

Summary

Is there a single set of steps that if followed can ultimately lead to productivity? I don’t think so since one size has never fit all. Every person is different, works in their own unique way, and has their own set of motivators, distractions, and more. If you learn what steps work best for you and gradually refine them over time, you can come up with a personal productivity process that can serve you well. Productivity is definitely an “art” that anyone can learn with a little practice and persistence. Start with one productivity technique to get things kicked-off and then add additional techniques as needed.

You’ve seen some of the steps that I personally like to follow and I hope you find some of them useful in boosting your productivity. If you have others you use please leave a comment. I’m always looking for ways to improve.

My Personal Review of 2018

With this blog post I want to recap my year 2018 and find a personal resume – partly for me as I have to know where I am standing and what this year brought for me but also for the readers of this blog of course. I also want to see what I can improve for the next year and, well, maybe I can really improve some things. I will try, for sure!

Work

Offering Solutions Software

It has been quite a while now (2016) since I have founded my company “Offering Solutions Software” which I provide ASP.NET Core and Angular consulting and development with. In the beginning it was just a “side project” which I was running beside my everyday work. In the meantime it became my full time job and I think this year I stabilized it a bit and could gather a lot of experiences with running your own company on your own. The amount of work you put it is massive, especially when you do a lot of community stuff beside (which I will mention later). You are responsible for everything that you do from the book keeping over the insurances to how you treat your customers, making acquisitions, managing your time like, negotiating contracts and so on. (Not that I did not know that when I started. But the way you expect it to be and the way it is in the end differs mostly. Which is not a bad thing. 🙂 However it is a lot of fun, too! There are a lot of parts where you gain some freedom in decisions. For me this is important especially if it comes to questions on “Can I attend this conference?”, “Can I take a day off to build up some skills in xyz” or “Can I give this course/workshop instead of developing at a customer?” This freedom is kind of satisfying but again: You always have to find the right balance. Kind of balancing those things is what I learned this year but have to improve in the future for sure!

As a side project I started the Developer Academy which I want to provide courses with. This platform was raising in the middle of the year but I want to improve it during 2019. There is no pressure on that which I enjoy but I want to bring courses, knowledge to people and run workshops independently.

Egghead.io

I just checked my mails and in the beginning of 2018 I became an egghead instructor. Wow, that was one year ago in January. Phew, time passes. However: I LOVE doing video courses and egghead provides me a platform where I can do small online courses with hitting-the-nail-topics if I got a brainfart again. Thats cool. I mean, there is a lot of preparation still, but it is not as much effort like a 3.5 hour course which I did for packt/udemy last year. So this is kind of nice.

Check out my courses here: courses

Google Developer Expert

A big thing this year for me was becoming a Google Developer Expert in Web Development and Angular. This is stunning, absolutely amazing. I am so proud of being part of this really really amazing community. I do not want to spend much time on this otherwise than thank all the people who have been involved in this. I really enjoy this community and think it is the best in the world. I owe this community a lot.

Microsoft MVP

Beside the GDE which I got for the first time I have been awarded as a Microsoft Most Valuable Professional for the fourth time in a row. Again: I could not be happier about this. This is amazing. Again this community thing became a big thing in my life. I managed to get my job in a way I can push community as far as I can.

With all my heart, body and soul I truly believe that the community part is one of the best things ever happened to my life, either its the GDE or MVP Program, UserGroups or discussions. It’s the best thing about my job.

Pluralsight

Another thing which I did not mention so far and just want to mention briefly here is that I became a Pluralsight author. This is a thing where a dream came true for me. Currently I am working on my first course and will let you guys know if there is something to see. A blog post will follow then. I think if there is no value yet, there is no reason to celebrate. 🙂

I mentioned the community already but want to point out the activities I did in 2018 and the things I have been involved in.

.NET Day 2018

At May 29th Manuel Meyer and I hosted the .NET Day 2018 supported by a big team of helpers and volunteers. It was a great success as we got a lot of good and constructive feedback. The point on this – and this is why I am also very proud of it – is that it is a community conference. This means that everything (!) we earned (and I do not only mean financial things but also provided help from others, connections, feedback, experiences, …) returns to the swiss developer community. What does that mean? Suddenly we were able to buy things like small stickers or having other speakers as usual which brought variety into the user groups, having some food for the user groups here and there and where able to host some events like the .NET Conf local which we also did this year. We were just able to think a little little bit bigger. I think the people attending know this and felt this during the events. But also there is nothing achieved so far. The biggest part of what we have is going to flow in the .NET Day 2019 where community is again the basic idea behind. Check .NET Day Homepage for more info. Further announcement will follow.

SwissAngular

Damien Bowden and I started SwissAngular as a weekly newsletter and this year we where able – of course only with the help of other community interested people like Thomas Gassmann and Manuel Meyer – to organize the first two SwissAngular Meetups. We built a new UG SwissAngular Meetup! So if you are interested in providing a talk we are very interested. The meetups were really well attended which shows that there is a lot of interest in Angular in Switzerland. We hear you guys. We are trying to evolve this thing in 2019.

.NET UserGroup

With an amazing team behind the .NET User Group Zürich we managed to provide a lot of meetups during this ear. I think we nearly had every month except the summer break. I am also very proud of the team. There is a lot of work behind this but everybody is working with enthusiasm and motivation. Thank you for letting me be part of this guys 🙂 Again: If you want to speak, let us know.

Conferences, Talks and Articles

I have been to a lot of conferences this year, including the BASTA! or the Angular Days in Germany in Berlin and also gave a talk the the WebZurich Video Youtube about “Real Time web applications with Angular and ASP.NET Core SignalR” or maybe the “Cross-Plattform-Entwicklung mit Angular, Cordova und Electron” talk in german which I gave at the BASTA! in Frankfurt here. All my talks and slides are always provided on Speakerdeck. The Windows Developer Magazine in Germany also printed one of my articles, you can read it here (german) Mit ASP.NET Core und Angular eine Webanwendung erstellen

Personal

Now comes the personal part. I normally do not let influence personal things into my blog but I thought a year recap would not be complete without a personal part as well. I will keep it small and short.

I got engaged! In August on a holiday in Barcelona I asked my girlfriend if she wants to become my wife and luckily she said yes. I am very happy about this and this leads me to the next thing which is my wedding this year. The celebration will be very simple and minimalistic with only a few guests. Dut from my family background for me this is a huge huge thing.

Further I bought a flat in Switzerland. This was exciting, I can tell you. However, I am a flat owner right now 🙂 We moved in in November so everything is kind of fresh and new and we do not have all the furniture we want and stuff, but this will evolve over the time I think…or hope 🙂

Next personal thing is that I will become an uncle in 2019! Haha, let us see how that turns out, but I am also really looking forward to this.

2019

Many things have been going on in 2018. However in 2019 I want to get a better structure on the things I work on. I do already know how to structure my work but it does not feel like the golden path, you know? I tweeted about this:

If you have any suggestions: Let me know. I think I will blog about this, once I have found a better solution than a simple todo list which I am currently putting my brainfarts on and work over them. I would like to plan, prioritize and track it. Have many ideas, but, like I said: Will maybe blog about this 😉

Next thing is work life balance. I do not believe in this because if you work with things you love there is no need for finding a balance which implies like working 8 hours and doing something else 8 hours to “balance it out”. (Do not let us start a discussion about this here) but however: I would like to find a way to get some distance to coding, teaching, speaking, consulting etc. so what I do in my everyday job and hobby. I love what I am doing, I do not want to get rid of this, but I want to give myself time to do something else completely not related to this. Maybe start bowling again where I can like refresh my head and always notice that I thought of nothing else than my movement during a game. I started reading more books which are not work related. Funny ones, things which make me laugh and where I look forward to read it. I have found such a book right now and if I have finished it I will search for the next one immediately. I like this one to two hours off a day before going to sleep. This is a thing I want to do more in 2019.

Looking back I am nothing more than thankful to everyone involved in this journey. Directly or indirectly. There have been many people involved. Some of them know, some of them do not. Thank to all of you. I am trying to give everything back I can, and I’ve got a whole year left to do it.

Thanks for reading and a great 2019.

Fabian

3182127581

As you may know from developing different web applications, component templates are not always fixed. An application may need to instantiate and load new components at runtime. Thankfully, Angular provides its own API for loading components dynamically. Discover the angular way with a working example of an application, by creating different instances of dynamic components to be displayed to the user. Dynamic components are reusable and make building large-scale applications much easier. You will learn to programmatically create and load components at runtime to help simplify this process.

Example Code and Explanation

For this example, we are going to build an app that creates and shows modals. The app attaches to the modal by attaching to the body element. This way you’ll only have one modal displayed at a time. The main component presents the user a button to show a modal.

Bringing Dynamic Components to Angular

Dynamic Component

For simplicity, the app uses a simple component called ModalComponent, displaying a modal based on Bootstrap modals.

Modal Displayed

Bringing Dynamic Components to Angular

modal.component.html

The ModalComponent receives as an input in the modal options, including the title and the body text.

The ModalOptions model is defined like this:

modal.options.ts

The ModalComponent uses the ModalGeneratorService to destroy itself when the close button is clicked and the element is removed from the screen.

modal.component.ts

Component Generator Service

The app uses a service to dynamically create the component.
The ModalGeneratorService has two exposed methods:

  1. addModal to add the dynamically created component. It will receive parameters, and the modal component adds together with the modal options.
  • This method uses the ComponentFactoryResolver service to add components dynamically. This service has an exposed method called resolveComponentFactory.
  • Basically what it does is takes a component and returns a ComponentFactory. The name is self-explanatory, it is an object that knows how to create components
  • To add a component the ComponentFactory exposes a method which is called in this case an Injector. The modal is added to the AppRef so that the modal component can be created using the Angular’s default Injector, provided in the constructor. The modalOptions are passed to the modal component assigning them to the instance.
  • removeModal basically detaches the modal view from the ApplicationRef so Angular is able to change detection. Otherwise, it won’t recognize the element. The ComponentRef is destroyed after removing the DOM element from the body.
  • modal-generator.service.ts

    The Main Component

    The AppComponent is the main component in charge of defining what modal is going to be created and displayed in the button to add that modal. For this example the AppComponent imports the ModalComponent and adds it through the ModalGeneratorService addModal method, passing the component and the modal options as parameters.

    app.component.html

    app.component.ts

    Wrapping Everything Up

    The last changes are applied to the module declaration, in this case, the AppModule.

    Here is where all the dependencies are imported. One thing to keep in mind is to define the entryComponents. Basically, add the ModalComponent to entryComponents in AppModule declaration. This allows Angular to create the ModalComponent on the fly.

    app.module.ts

    Hopefully, you now have a better understanding of what bringing dynamicity to Angular components can do. With an example to show how to create a component dynamically as well as the modules and services provided by Angular, you should be able to achieve this task. You may need to load a component dynamically in various scenarios, such as displaying different popup modals or alerts across an app. Some benefits of the dynamic components are that they are reusable and make building large-scale applications much easier. I hope this article helped you gain a better understanding of dynamicity in Angular.

    Web Frameworks: Soundness – Blog

    For a web framework to be effective, it should offer you more than just functionality. It doesn’t matter how much hard work you put into your application if it breaks when people use it. Beyond testing, let’s explore how frameworks can help us build better code before we test it.

    While we have been comparing web frameworks to music, soundness in this context isn’t how good the framework sounds on a turntable. It is the concept of our code being in a good condition and robust. While we should and can test for this, helping us in other ways should be one of the main benefits of using a framework.

    This is part of a series on web frameworks. If you’ve missed our previous posts, you may want to start with If we chose our JavaScript framework like we choose our music…

    Overview

    It is unlikely that you would ever get anyone who was involved in the early days of JavaScript to admit the language was created to be the ubiquitous language of applications. It was initially built in 10 days as a scripting language to make websites a little bit more interactive. Now, JavaScript has exploded, but its very nature makes it very flexible at run-time. This allows what is syntactically correct JavaScript to potentially be hugely unpredictable.

    Also, unlike many other application development solutions, it isn’t just one language we have to use. Outside of JavaScript, most applications have to deal with some level of HTML and CSS. Also, most applications have to deal with external resources as well, from images to serialized metadata and fonts.

    To get our application to perform properly, the server environment that it runs in can have a dramatic impact on our application

    To get our application to perform properly, the server environment that it runs in can have a dramatic impact on our application. Furthermore, we still must contend with running our application in different contexts, from older browsers to low powered mobile devices.

    We will look at how each framework approaches these challenge of helping an end developer better know that the code they author will operate as they intend.

    There are generally three areas where a framework can help us, and we will look at each framework from those stages. First, we have development time. What sort of information can we get during development time that helps us know if we are authoring our code properly? Second, when we go to build our applications, before we deploy them, is there any secret sauce that helps ensure that our application will work? Third, once we have our application loaded on the server, is there anything that helps us ensure that the application runs properly?

    Jump to:

    Angular 2+

    Overall approach

    Angular 2+ is authored in TypeScript, which provides internal soundness to the Angular code base. TypeScript can also provide a level of downstream type soundness when authoring code with Angular 2+ in TypeScript. The Angular 2+ CLI includes a linting command, which will help ensure that code styling and conventions are enforced.

    Development time

    At development time, when authoring in TypeScript there is support leveraging the libraries in a sound way, with code completion and static detection of some logic errors. Because Angular 2+ relies heavily on ES.Next Decorators, which change the run-time behavior of components, as well as a specialized template language, it is difficult to fully ensure that run-time behavior is ensured at development time.

    For Visual Studio Code, there is an Angular template language service available, which provides IntelliSense for Angular 2+ templates, which helps improve the support for detecting template syntactic errors at design time.

    Build time

    At build time, the TypeScript compiler can help ensure sound behavior, again with the limitations of being able to statically analyze the behavior added via decorators. For templates, Angular offers ahead of time (AOT) compilation. If used, static syntactical issues with templates will be identified at build time. If not used, the just in time (JIT) template compiler is used within the browser at run-time.

    Both testing and linting are not part of the out of the box Angular build process. They are standalone commands when using the CLI build command, which the developer would need to be aware of to ensure they have a robust build process. Of course, these can easily be integrated into a CI process.

    Runtime

    When using the JIT template compiler, template errors are identified in the browser. In addition, there is Augury, a Chrome Dev Tools extension for debugging Angular 2+ applications.

    React + Redux

    Overall approach

    Another Facebook project, Flow, provides static type checking for projects like React. Redux is built without any strong type checking. Both React and Redux offer official TypeScript typings that are bundled with the distribution packages. In addition, there are guides to using React and Redux with Flow.

    One of the more challenging aspects of sound development with React + Redux is that Redux action types are strings. As a result, it can be quite easy at design time to utilize actions improperly, making it impossible to statically identify incorrect actions at design time.

    React and Redux both promote writing code that is separable and fully testable. In particular, Redux promotes the use of pure functions for reducers, which, when followed, ensures that a reducer is fully testable without a need for injecting state into the reducer. The belief of this architecture is that it promotes patterns that reduce cross dependencies between units of code, which could make an entire system fragile.

    Development time

    There are generally two approaches to providing soundness at development time with React + Redux. First, most IDEs have support for Flow or the support is added via an extension. WebStorm (and IntelliJ) support Flow out of the box, Visual Studio Code and Atom are supported through plugins. This support allows static issues to be identified within the source code using the Flow type system.

    Also, it has become somewhat common to develop React + Redux applications in TypeScript. Since both packages provide their TypeScript typings integrated with the package, it is possible to author downstream applications that are sound, based on the provided typings. This includes that ability to author JSX in a sound fashion using the builtin JSX support of TypeScript, also known as TSX.

    Build time

    Since both React and Redux are standalone libraries, they do not presume a specific build process. Both Flow and TypeScript can be enforced at build time, as well as JSX syntax.

    Runtime

    Another Facebook project, Immutable.js is often used with React + Redux applications. It provides immutable data structures that are designed provide run-time enforcement of unintentional mutations of data structures in an application.

    React provides a React Developer Tools extension for Chrome. There is also a special debug mode for React which provides additional run-time metadata which can be used to help debug an application.

    Vue.js

    Overall approach

    Vue uses Flow internally for typing, and it provides TypeScript definitions for external use for core Vue, vue-router, and Vuex. They provide the view-class-component library to simplify the process of using types when creating components.

    The Vue documentation encourages unit testing of Vue components, although the Vue project does not recommend any particular unit testing framework.

    Development time

    Vue has an official CLI app, vue-cli. This app has several built-in templates that provide an initial structure to a Vue app.

    Build time

    The Vue docs encourage unit testing of components. The vue-loader docs specifically address unit testing Vue single-file components, including test running with Karma and mocking dependencies.

    Runtime

    Vue components can include property validators. These specify requirements for received property values, and Vue will emit warnings if these requirements are met when a property value is set.

    An application can register a global error handler through Vue.config.errorHandler. All render errors will be passed to this handler.

    Dojo 2

    Overall approach

    Dojo 2 is authored in TypeScript and is distributed with its TypeScript typings. It is intended that downstream code is also authored in TypeScript. The framework is made up of modular packages that can be used together or independently.

    The Dojo 2 CLI is designed to make it easier for developers to ensure that their applications are structured appropriately, testable, and built in an efficient way.

    Development time

    One of the main design goals of Dojo 2 is that the use of TypeScript should promote sound code development for the end user. The framework is authored to help ensure that types are fully leveraged to provide as much information to the developer at development time. This includes the use of CSS Modules for the theming system to provide IntelliSense and code completion for CSS at design time and ensuring that CSS is tightly coupled with the modules that use that CSS.

    Build time

    The out of the box CLI build process ensures sound development via TypeScript and that CSS dependencies are bundled with the build. In addition, if a tslint.json file is present, the CLI will automatically lint the project as part of the build process.

    Runtime

    Currently, outside of a few warnings, there is no additional tooling beyond standard browser developer tools to assist the developer in debugging an application. Further run-time tooling is on the Dojo roadmap.

    Ember

    Overall approach

    Traditionally, Ember.js has focused heavily on convention to encourage the developer to build sound applications. Now that there is fundamental tooling that allows a better approach, Ember.js has started to adopt this. Glimmer is authored in TypeScript and Ember has introduced TypeScript typings for downstream code authoring in TypeScript. In addition, Ember has had a long-term vocal presence in the standards committee for ECMAScript, advocating for solutions to common problems and issues that developers experience when authoring applications.

    Development time

    Ember.js has a feature-rich CLI which provides significant development time structure to applications. Again, Ember.js provides many conventions to help ensure that applications behave as designed.

    There are third-party plugins for WebStorm (IntelliJ), Visual Studio Code, and Atom which can help provide IntelliSense when developing an Ember.js based application.

    Build time

    At build time, Ember.js provides an out of the box build solution with their CLI tool. The Ember.js CLI is designed to be extensible and the build command can incorporate other functionality like linting. Ember.js tends to utilize templates, authored in Handlebars.js, and the validation of those templates occurs at build time.

    Runtime

    Ember.js provides Ember debug options which will provide enhanced diagnostics to make it easier to identify issues in an application at runtime. In addition, the Ember Inspector is a Chrome Dev Tool plugin that provides additional tools to facilitate debugging of Ember.js applications.

    Aurelia

    Overall approach

    Some of Aurelia is authored in TypeScript, and all of the modules provide their TypeScript typings to make downstream authoring in TypeScript a possibility. The main focus of Aurelia is to try to keep the entire framework modular to promote a decoupled architecture and testability.

    Development time

    When authoring downstream applications in TypeScript it is possible to harness the typings for Aurelia to author sound downstream code.

    Aurelia, like other frameworks, does rely on templates for creating components. There is a Visual Studio Code extension which gives some code completion and IntelliSense for the template language. The last commit to this project was over 4 months ago, so it is difficult to determine if this extension is actively developed and maintained.

    Build time

    When scaffolding applications, Aurelia’s CLI will encourage linting and promote patterns around testing. The biggest way in which Aurelia ensures soundness at build time is by encouraging the development of applications in TypeScript.

    Run time

    Aurelia encourages patterns around providing informative error messages but does not have any formal structures for providing instrumentation or debugging information for an application.

    Summary

    Angular 2+

    Angular 2+ using a strongly typed language like TypeScript certainly improves the soundness of the project. The end developer experience is not quite as sound and straightforward due to the heavy reliance on templates, which tend to contain application logic, and the use of decorators to achieve run-time behavior.

    There is a decent amount of tooling to make an entire Angular application hang together and good tooling to provide run-time insight and debugging to an application.

    React + Redux

    React + Redux provide typing information to make it easy to author downstream applications in Flow or TypeScript. They also promote patterns that make source code more separable and testable. Like many things with React and Redux, it is up to the end development team to ensure that these practices and conventions are followed. For teams that know what they are doing, these libraries and other associated libraries are great tools.

    Vue.js

    Vue.js makes developing code in a sound and structured fashion straightforward. There is a good set of tooling to help ensure that applications behave as expected. Vue.js provides good information about how to go about testing code based on its framework. There are run-time capabilities which help ensure that data running through the application at run-time is valid.

    Dojo 2

    Dojo 2 is built with TypeScript with a specific focus to provide a sound framework for developers to create applications. Dojo 2 has a good set of tooling ensuring that a built application behaves properly at run-time. It also promotes patterns of modular separable code that can be fully tested.

    Ember.js

    Ember.js mostly relies upon strong structural conventions to ensure that applications behave properly at run-time. Ember continues to be receptive to new technologies, like TypeScript, which can promote more sound coding. Ember provides an extensive set of tooling which is highly extendable by third-party plugins to provide a robust pipeline and offers run-time instrumentation and debugging tools.

    Aurelia

    Aurelia’s encouragement of downstream development in TypeScript is the biggest benefit it has for creating sound applications. While Aurelia relies upon templates like some other frameworks, they rely less on magic being injected into components. Like many things though with Aurelia, it feels like they have a robust approach and direction, but have had some difficulty in materializing a full solution.

    Up next

    Up to this point, we have looked at what each of the frameworks has to offer you, mostly from a technical perspective. One of the challenges of modern web application development though is that it is not just source code, it is about the wider community of people and how each of the frameworks governs itself. Invariably you will need help with adopting a framework and having an understanding of the larger community can impact your decisions. In the next in the series, we will explore the community aspect of each framework.

    Other posts in the series


    Containerizing Angular Applications with Docker – Code with Dan Blog

    I’m excited to announce the release of my next course on Pluralsight titled Containerizing Angular Applications with Docker! This course walks you through the process of containerizing front-end applications (with a focus on Angular) using Docker images and containers.

    Here are a few questions this course will help you answer:

    • Why “containerize” front-end applications?
    • Should I consider using a CDN?
    • How can I serve front-end applications created with Angular (or other libraries/frameworks) using nginx?
    • How do I create a custom Dockerfile and custom image for my application?
    • What is a multi-stage build and how can I use it to build my code and create a final image?
    • Can I use Angular CLI features with custom Dockerfiles?
    • How do I convert my custom image into a running container?
    • How can I run multiple containers simultaneously?
    • What options are available for running my container(s) in the cloud
    • Much more…

    Here’s a summary of the course…

    The Angular CLI provides a great way to build and run Angular applications locally, but what do you do when you need to build Angular in another environment? How do you deploy your Angular application between development, staging/QA, and production environments while ensuring that everything works as planned?

    In this course, Containerizing Angular Applications with Docker, you’ll explore the role that Docker containers can play in simplifying the process of building and deploying front-end applications (with a focus on Angular). First, you’ll learn about the role of images and containers and image registries. Next, you’ll discover how to write custom multi-stage Dockerfiles for building Angular code. Then, you’ll delve into different server options such as nginx for running your Angular applications efficiently and consistently across environments. Finally, you’ll explore how to orchestrate multiple containers using Docker Compose and .yml files. By the end of this course, you’ll have the necessary knowledge to efficiently build and run Angular applications across multiple environments by utilizing Docker containers.

    1. Angular and Containers
      • Course Agenda
      • Angular and Containers
      • Prerequisites to Maximize Learning
      • Key Course Concepts
      • Why Use Containers?
      • Running the Angular Application Locally
      • Running the Angular Application in a Container
    2. Creating a Multi-Stage Dockerfile
      • Creating a Multi-Stage Dockerfile
      • Creating the Angular Development Dockerfile
      • Multi-stage Dockerfiles
      • Creating the Angular Build Stage
      • Creating an nginx/Angular Stage
      • Creating an nginx/Angular Image
      • Using the VS Code Docker Extension
    3. Deploying the Image and Running the Container
      • Deploying the Image and Running the Container
      • Running the Angular Container Locally
      • Running the Angular Container using the VS Code Docker Extension
      • Image Registry Options
      • Deploying the Angular Runtime Image to a Registry
    4. Running the Angular Container in Azure
      • Running Multiple Containers
      • Running Multiple Containers
      • Running the Application with Docker Compose
      • Exploring the Docker Compose File
      • Options for Deploying Multiple Images/Containers

    I hope you enjoy the new course!

     

    2504587616

    In this blogpost I want to describe how to develop a todo application which stores the items in the IndexedDb and synchronises it later if the app gets back online.

    After this blogpost you should have an example how to use the IndexedDb in your applications, how to register to the online and offline commands and send items if the event comes up.

    The code to this blogpost can be found here /github.com/FabianGosebrink/Angular-Online-Offline-Sync

    Introduction

    When working with online and offline applications the first thing you think about is PWA right now which works offline and can give you data even with no active internet connection. Things are about to get interesting when we want to synchronise items. This means to detect when the internet connection changes, to react to this and, if back online, send the items back to the backend.

    Checking Online and Offline

    Let’s take a look on how to notice if we are online or offline. There is a built in browser functionality which takes care of this. /developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine We only have to use this in Angular. Let us build a service to abstract that functionality and register to the events

    import  Injectable  from '@angular/core';
    import  Subject  from 'rxjs';
    
    declare const window: any;
    
    @Injectable( providedIn: 'root' )
    export class OnlineOfflineService 
      
      get isOnline() 
        return !!window.navigator.onLine;
      
    
      constructor() 
        window.addEventListener('online', () => console.log('online'));
        window.addEventListener('offline', () => console.log('offline'));
      
    
    

    That is cool! But how do we throw an RxJs event if an online/offline event fires? Lets introduce a Subject to handle this and call a function which emits the Subject then.

    import  Injectable  from '@angular/core';
    import  Subject  from 'rxjs';
    
    declare const window: any;
    
    @Injectable( providedIn: 'root' )
    export class OnlineOfflineService 
      private internalConnectionChanged = new Subject<boolean>();
    
      get connectionChanged() 
        return this.internalConnectionChanged.asObservable();
      
    
      get isOnline() 
        return !!window.navigator.onLine;
      
    
      constructor() 
        window.addEventListener('online', () => this.updateOnlineStatus());
        window.addEventListener('offline', () => this.updateOnlineStatus());
      
    
      private updateOnlineStatus() 
        this.internalConnectionChanged.next(window.navigator.onLine);
      
    
    

    So when an event on window is coming up we call our updateOnlineStatus() method which fires our Subject<boolean>. We are proposing the private field to the outside world as an observable asObservable() in a getter called connectionChanged() to make it read-only for the consumers.

    The Todo-App

    As the Todo-app itself is not the core point of this blogpost, I will just post the code for the form and the list that you have an impression of what is going on so far.

    export class Todo 
      public id: string;
      public value: string;
      public done: boolean;
    
    
    <div style="text-align:center">
      <h1>Welcome to  title !</h1>
    </div>
    <div>
      <form (ngSubmit)="addTodo()" [formGroup]="form">
        <input type="text" formControlName="value" />
        <button [disabled]="form.invalid">Add Todo</button>
      </form>
    </div>
    <div>
      <ul style="list-style-type: none;">
        <li *ngFor="let item of todos" class="todo-item">
          <span [ngClass]=" inactive: item.done "> item.value </span>
    
          <button class="todo-item-button" (click)="markAsDone(item)">Done</button>
        </li>
      </ul>
    </div>
    
    @Component(
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    )
    export class AppComponent implements OnInit 
      title = 'Angular-Online-Offline-Sync';
      form: FormGroup;
    
      todos: Todo[] = [];
    
      constructor() 
        this.form = new FormGroup(
          value: new FormControl('', Validators.required)
        );
      
    
      ngOnInit() 
        / do something
      
    
      addTodo() 
        / do something else
    
        this.form.reset();
      
    
      markAsDone(todo: Todo) 
        todo.done = !todo.done;
      
    
    

    Todo Service

    Now let us build a Todo service which saves the todo items

    We will have no backend here, but you can run http calls to your backend easily if you want.

    As the todo item has a public id: string; which is a guid we can use the package angular-uuid and use it with import UUID from 'angular2-uuid'; to create a guid. For the sake of simplicity we will only do an add and a get method here:

    import  Injectable  from '@angular/core';
    import  UUID  from 'angular2-uuid';
    import  Todo  from '../models/todo';
    
    @Injectable( providedIn: 'root' )
    export class TodoService 
      private todos: Todo[] = [];
    
      addTodo(todo: Todo) 
        todo.id = UUID.UUID();
        todo.done = false;
        this.todos.push(todo);
      
    
      getAllTodos() 
        return this.todos;
      
    
    

    Now lets use our OnlineOfflineService we just created and register to the Subject we created.

    import  OnlineOfflineService  from './online-offline.service';
    
    @Injectable( providedIn: 'root' )
    export class TodoService 
      constructor(private readonly onlineOfflineService: OnlineOfflineService) 
        this.registerToEvents(onlineOfflineService);
      
    
      /... other code
    
      private registerToEvents(onlineOfflineService: OnlineOfflineService) 
        onlineOfflineService.connectionChanged.subscribe(online => 
          if (online) 
            console.log('went online');
            console.log('sending all stored items');
           else 
            console.log('went offline, storing in indexdb');
          
        );
      
    
    

    So with that we are registered and know when something is happening to the online status.

    Working with the IndexedDb

    To work with the IndexedDb we can use Dexie.js. Dexie has a very simple interface acting as a wrapper around IndexedDb.

    We can create a new database, provide a version and tell them what to store exactly.

    private createDatabase() 
      this.db = new Dexie('MyTestDatabase');
      this.db.version(1).stores(
        todos: 'id,value,done'
      );
    
    

    So lets call this method in the constructor of our service

    / imports
    
    @Injectable( providedIn: 'root' )
    export class TodoService 
      private db: any;
    
      constructor(private readonly onlineOfflineService: OnlineOfflineService) 
        this.registerToEvents(onlineOfflineService);
    
        this.createDatabase();
      
    
      / ... stuff
    
      private createDatabase() 
        this.db = new Dexie('MyTestDatabase');
        this.db.version(1).stores(
          todos: 'id,value,done'
        );
      
    
      / ... moar stuff
    
    

    Now we can create methods to

    • add an item to the IndexedDB, and
    • send all items from the IndexedDb to the (imaginary) backend
    private addToIndexedDb(todo: Todo) 
      this.db.todos
        .add(todo)
        .then(async () => 
          const allItems: Todo[] = await this.db.todos.toArray();
          console.log('saved in DB, DB is now', allItems);
        )
        .catch(e =>  e));
        );
    
    
    private async sendItemsFromIndexedDb() 
      const allItems: Todo[] = await this.db.todos.toArray();
    
      allItems.forEach((item: Todo) => 
        / send items to backend...
        this.db.todos.delete(item.id).then(() => 
          console.log(`item $item.id sent and deleted locally`);
        );
      );
    
    

    If we want to add something to the IndexedDb we can simply call the add method and get a promise in return. With the then() syntax we only give a console log about the current state about the IndexedDb.

    Sending the items however is getting all items, looping over it, sending it and delte them locally if sending was successful.

    So there are two things left to do:

    • Adding the items to the IndexedDb in case of offline
    • when getting back online, sending allitems and deleting them locally

    First one can be achieved in our AddTodo() method. We can extend it asking for the online status:

    addTodo(todo: Todo) 
      todo.id = UUID.UUID();
      todo.done = false;
      this.todos.push(todo);
    
      if (!this.onlineOfflineService.isOnline) 
        this.addToIndexedDb(todo);
      
    
    

    The user now does not know where the items are stored and he should not worry about this.

    The second point can be done with calling the sendItemsFromIndexedDb() method in case we get back online.

    private registerToEvents(onlineOfflineService: OnlineOfflineService) 
      onlineOfflineService.connectionChanged.subscribe(online => 
        if (online) 
          console.log('went online');
          console.log('sending all stored items');
    
          this.sendItemsFromIndexedDb();
    
         else 
          console.log('went offline, storing in indexdb');
        
      );
    
    

    Extending the Component

    Now as the service is ready we can use this service inside our component and extend this a bit.

    export class AppComponent implements OnInit 
      title = 'Angular-Online-Offline-Sync';
      form: FormGroup;
    
      todos: Todo[] = [];
    
      constructor(
        private readonly todoService: TodoService,
        public readonly onlineOfflineService: OnlineOfflineService
      ) 
          / stuff
      
    
      ngOnInit() 
        this.todos = this.todoService.getAllTodos();
      
    
      addTodo() 
        this.todoService.addTodo(this.form.value);
        this.form.reset();
      
    
      markAsDone(todo: Todo) 
        todo.done = !todo.done;
      
    
    

    Our addTodo() is calling our todoService which is handling our data storage then. In the constructor we are injecting our OnlineOfflineService public so that we can access it from the template asking for the online status like

    <p>
      current status:  onlineOfflineService.isOnline ? 'online' : 'offline' 
    </p>
    <div>
      <form (ngSubmit)="addTodo()" [formGroup]="form">
        <input type="text" formControlName="value" />
        <button [disabled]="form.invalid">Add Todo</button>
      </form>
    </div>
    <div>
      <ul style="list-style-type: none;">
        <li *ngFor="let item of todos" class="todo-item">
          <span [ngClass]=" inactive: item.done "> item.value </span>
    
          <button class="todo-item-button" (click)="markAsDone(item)">Done</button>
        </li>
      </ul>
    </div>
    

    With this we have seen how we can add items to a list wether the app is online or not. With the navigator event we are able to react to the event if a browser changes online and offline status. This combined with RxJs can help us reacting to the event in Angular and store items locally before syncing or send them directly.

    HTH

    Fabian


    Develop Engineering Team Organization for System Architecture

    An engineering team’s organizational structure is an essential element of their success and growth. After chatting with Bill Salak, the Senior Vice President of Technology at ABC Mouse, on our podcast, Tech People, it got me thinking about how deep this organization goes. Team organization can easily go unnoticed in the daily pursuit of individual tasks, but should never be taken for granted. Putting thought and intention into your organizational methods, and having a solid foundation set in place is the key to the success for any engineering team.

    Management Style and Practice

    How Engineering Team Organization Helps to Build Compatible System Architecture

    When managing an engineering team, there are many factors to consider. At the foundation of the standards we have built at Gistia, we prioritize cohesive communication. And I don’t just mean our team needs to communicate well; it goes beyond this. In order for our clients’ product to be as good as our clients need them to be, we need to synchronize our team with our clients’ project goals.

    Take these two examples into consideration:

    Team A is working on a project. They review the project individually in an email sent to them by their team leader and begin to tackle the project individually. The work they produce is good, but now two team members have built conflicting components. They have interpreted the goal of the project differently, and are now forced to backtrack and rebuild the product. Poor communication and team structure have lead Team A to build a product that is incompatible with their client’s needs.

    Team B reviews a new project together. They create a plan and delegate necessary components. They meet weekly to make sure everyone is on track with the timeline, hashing out issues they run into and fixing bugs. As the project moves along, they make sure the product is easy to use and cost effective for their client. Team B has created a smooth system of communication amongst its team members and it shows in their product outcome.

    To put this concept into perspective, I’d like to bring up a reference to Conway’s Law. During my interview with Bill Salak, he summarized his perspective as “A company will design a system that is a copy of the organization’s communication structure. Effectively, the way you organize your company will impact the way your products are designed.” In other words, having clear communication sets you up for success. We create a body of work that’s efficient and effective by modeling our products as we do our own team. Think about it— if you have a team putting together various pieces of a project, and everyone involved is tackling the project based on their own individual standards, you’re going to end up with a mess.

    Skill Development vs. Length of Employment

    How Engineering Team Organization Helps to Build Compatible System Architecture

    When building and growing an engineering team, there are many things to consider. Sure, the obvious answer is to hire the most experienced person for the job, but is that really the best thing to do? If you hire only the most experienced people, you could inadvertently create an environment where team members are expressing conflicting views with stubbornness of who is more right. And beyond this, you are going to find employees who are uninspired to grow because they are already at their peak.

    At Gistia, we believe in setting up an environment driven by employee development. What this means is that we set our employees up so that they are encouraged to learn from one another. When you implement mentorship into your team’s organization, you build a culture that chooses collaboration over competition. Think about it— if you hire someone new who has the basics down and can get things rolling, when they run into an issue they can easily seek mentorship from a more senior team member. The senior team member is satisfied because they have been helpful, and they are passing along this knowledge. It gives them a greater purpose to see someone excited and eager to grow. The junior team member gets to learn about the areas they are interested in and seek growth in. In this way, the team members are working together.

    What happens when a team member wants to move up in the company? Simple. Building a model where people want to grow allows them to move at different paces. Imagine, you have one very eager team member putting in extra hours, who is inspired by the learning possibilities your company has to offer. They are going to move up at a much faster pace than someone who is a little slower and methodical in their approach. Many businesses choose to promote their teams based on how long they have been employed. This model works fine for them; but if you hire people who have shown their enthusiasm within the company and continue to move up by gaining the knowledge they need to advance, you’re creating an environment that encourages people to want to learn and grow, and you’re rewarding them for growing.

    Seniority should be built on a methodology of growth that allows people to earn their seniority through hard work and skill development, rather than basing growth off how long someone has been with a company.

    How Hierarchy Helps Engineering Teams

    How Engineering Team Organization Helps to Build Compatible System Architecture

    It may not seem obvious at first, but when you arrange your team successfully, the effects ripple into the work produced. We have gone over company growth and how important the clarity of communication is amongst team members. Now imagine this continuing into project portfolios.

    As engineers, success is not just creating the most complex code. Engineering firms have very smart people working for them; their ability to create complex code is not in question. But even the most complex coding is not successful in the long run if those skills are not transferable to your junior engineers. If your code is only able to proceed one generation of engineers, you become dependent on your senior team members. New employees have to play catch up, which creates more work for everyone, and does not last long term. This knowledge transfer is a succession that can be used in your favor. Within a growing company like our own, we need to be able to elevate strong people quickly and replace their role in the project after elevating them. For this to work, system architecture needs to be simplified and standardized to allow junior engineers to provide value. Otherwise, only senior engineers can participate.

    When building any new system you should be thinking of keeping a balance between two factors:

    1. Creating a system architecture that’s usable and repeatable in the long run.
    2. Creating code that’s not too complex so that the code is sustainable.

    If you accomplish these two goals you will have made your team’s time worthwhile, because this code will be standardized and repeatable.

    Why Should You Care?

    Team organization is fundamental to building compatible system architecture. They go hand in hand. Starting with a foundation built on communication encourages a business practice where team members not only want to grow but are clear on how to grow. The work produced is more efficient when your team members are working together and seeking mentorship to solve problems, instead of competing against one another. In the same way, seniority is found more valuable and employees retention is increased when it’s earned through growing.

    You may feel like you’re sacrificing the quick production of expert coding, but when you hire someone with less experience and wait for them to grow, the team moral you build will take your engineering team farther in the long run. These practices have proven their worth in the value of the products we at Gistia produce for our clients. We create code that is usable, not too complex and develop lasting relationships with our clients based on these proven methods.