This Dot Blog
This Dot provides teams with technical leaders who bring deep knowledge of the web platform. We help teams set new standards, and deliver results predictably.
Closer look at the DNA of the OpenFin Platform API
This blog takes a deep dive into the newly launched Platform API by OpenFin. After only a few days of playing around with the software, I realized just how much capacity it has and how many good features there are for developers. Ultimately, this robust set of features will significantly enhance your user’s experience. Before I begin, let's start with a bit of background information on OpenFin! Dictionary API: Application Programming Interface OS: Operating System CSS: Cascading Style Sheets What is OpenFin? Openfin is a tech company focused on modernizing desktops, and accelerating innovation in the financial sector. Simply put, OpenFin is the Operating System of Finance! With this, you get the power you need, the freedom you want, and the security you must have. The Problem If you are in the financial sector, you know that it is very important to be able to visualize everything on one screen when interacting with multiple applications. We usually tend to arrange windows over and over, but that takes time, and our applications do not work with each other, nor do they share all data between them by nature. Most importantly, we have to try to make sure all of these apps are secure! The Solution Platform API of course! What is the OpenFin Platform API? It's a software that will help you build desktop platforms at the speed of light. The Platform API will also facilitate the work of creating a merged user experience across the multiple applications. > “The Platform API is for central architecture teams who want to provide web apps with a unified desktop experience and common look & feel.” - OpenFin Engineer Key Features of the OpenFin Platform API - Layout management (e.g. window drag-and-drop and tabbing) - Customization of window look & feel - Styling via CSS - URL for loading the title bar window - Customization of all Platform APIs (behaviors) - Save and restore your window view. - Window level context (different from FDC3) - “Smart” Manifests to describe platforms via a single .JSON file The Powerful Gridlayout One of my favorite features is their grid layout. This feature has helped me reduce the amount of time it takes to develop an app. It can get pretty complicated to create dynamic grids that work with internal and external windows, by dragging and dropping. Now, if you see it from the end user point of view, this is an awesome idea, because the grid is customizable! Now, I know what you are thinking. And no, you don't need to ask the developer to change the layout of the application. You, as an end user, can change the layout as well. This gives every end user the opportunity to have customs views of their apps that best fit their needs, and grow their productivity. As a developer, I believe this is a huge benefit, since I don't have to worry about writing the code for this dynamic grid, nor do I need to worry about customizing the layout for each end user or client, which allows me to focus on the actual applications that will be used inside of the Platform API. Because a Grid layout is not enough The Platform API gives you the ability to power up your platform not only with custom layouts, but also with tabs! As a developer, I can develop my applications used inside of the platform with the assurance that they can be grouped together on tabs. And one of the coolest things is that you can customize them! If you are an end user of the platform, there are so many benefits here. E.g You can group the tabs by colors, where each color represents windows that belong to a certain group. This is huge. I have seen monitors of people working in the financial sector with 20 open windows and sometimes, users get lost in this. It's hard to manage what's going on. Your perfect setup...always So while working with the Platform API, I found out that you can save the current platform setup. This is an amazing feature. When working with dynamic layout, having to re-arrange things every time the code compiles can become very tedious. Now, imagine the benefits of this for the end users! As a developer, you can easily retrieve the existing snapshot of your saved platform by using the applySnapshot method. ` Thanks to this, you don't have to worry about losing the perfect setup that took you time to arrange. The setup will be always the same as long as you want to apply the saved snapshot! Advanced workflows The Platform API allows you to get the current context of your window. Thanks to this, you can easily save it into the platform's snapshots to re-use the context when the aplySnapShot method is called. The Core Now, let's take a closer look at the core of OpenFin’s Platform API and dive into some code examples. What is the core? It’s the manifest! I like to refer to it as the core because it is what carries all the information which constructs your Platform API project. The manifest is located inside of a .json file AKA the app.json Let’s Get Started Let's create our manifest: ` As you can see, this is the beginning of a new project using the Platform API. All you have to do is declare the "platform" object in your app.json. Now let’s dive into the features to customize the application experience. Customizing the Platform API Window Customize your window's look and feel using css, and by adding defaultWindowOptions. You manifest will look as follows: ` Take a look at this file to see what css selectors are available in the Platform API. You can also replace the default windows that come with the Platform API. To do this, specify the url property as a window option in your manifest. You can import your custom HTML as follows: ` When working with your custom window, all you have to do is consider the following: > This HTML file must specify a div component with the ID layout-container where you want the layout to be rendered. This will ensure that the window has a target to render the layout in. A url can also be specified in windowOptions in a snapshot, or when launching a snapshot via other methods. Window Commands OpenFin enables your Platform API application to work and feel like a native desktop application. That's why Openfin engineers further enhanced this experience by adding commands (with appropriate hotkeys) to help improve user experience. These commands can be added to the platform object inside of your Platform API manifest. ` Window Snapshot Another important property of the manifest is the snapshot. This property defines the structure of your window inside of the Platform. The snapshot needs to contain the window property where we will define the objects that go inside of it like *views*, and you can even define the structure of the *grid* by the layout property each window has. One cool feature about windows is that they can be created and destroyed by the end user, or developer, at any time. ` Window Layout This property defines the structure of your window. The layout works on a grid system. When working with the layouts, you have to add the content property inside of the layouts property. This content property contains an inner property called type. The values inside of the type value are the following: - row - column - stack - component In the following code snippet, you can see how I'm using the the content property with the value stack as my type value. Another thing to notice is that there's content inside of other content. The Platform API allows us to have nested content to have the ability to give our window the structure we want. ` View ComponentState Finally, another property that is worth mentioning is the componentState. This property gives us the option to provide more information about our view. Let's take a look at the following example. ` This view will render the website of https://www.thisdot.co inside of the view. Take a look to this complete example: ` If you want to learn more about the manifest and the Platform API, take a look at the official resources: - https://developers.openfin.co/docs/platform-api - https://cdn.openfin.co/docs/javascript/canary/View.html#~options - https://cdn.openfin.co/docs/javascript/canary/Window.html#~options - https://cdn.openfin.co/docs/javascript/stable/Platform.html Conclusion Working with Platform API has so many wonderful benefits. It gives me the opportunity to create more flexible software with consistent design, better user experience, and greater security. The Platform API has helped me deliver products faster, with better quality, without compromising the security of my software. OpenFin is changing the way we interact with financial software. Don’t miss your chance to use it!...
Mar 23, 2020
8 mins
How to do social Media sharing in your PWA
PWA using Web Share API Have you wondered how you can make a use of the "social" sharing API PWA? You know, when you want to share something, and it gives you the option to share via email, Twitter, Instagram, etc? Well, it's actually very easy! Take a look at the demo app to test it on your device. LIVE DEMO https://pwa-share-api.firebaseapp.com/ About the project I have built the sample project that can be found in this repo. In this project, you can see how I added the share functionality to the PWA , but you don't need a service worker or a PWA to add this functionality. I added it to this project because I wanted to show you how to do it specifically in a PWA, but you can add my code to any web app easily! Web Share API The bland definition of what a WSA is: > The Web Share API is meant to help developers implement sharing functionality into their apps or websites, but using the device’s native sharing capabilities instead of having to resort to scripts from the individual social platforms and DIY implementations. The API surface is a simple as it gets.- alligator.io The Web Share API has two share methods: share() and canShare(). The ShareData dictionary of the web share v1 consists of several optional members: text member: Arbitrary text that forms the body of the message being shared. title member : The title of the document being shared. May be ignored by the target. url member : A URL string referring to a resource being shared. The canShare() method contains an extra field which is the files property. files member: A File array referring to files being shared. To read more about it, check out this link So let's have a look at how it actually works. First, let's collect data to make our ShareData dictionary. ` Then, after we have declared what we want to share, we can use it in the .share() method. ` We can put that inside of a function, called onShare(), for example. ` Then pass the onShare() as a click handler to the share button. ` If you want to take it to the next level, you can check to make sure the *web share api* is supported by your browser. Your code will look as follows: ` If you want to use the canShare(), to send files, your code might look like this ` Browser Support If you go to canisue.com, you can see that browser's support for the share() method. Pretty much every major browser supports it. What about the canShare() method? Not as good as the share() method, hopefully it gets to more browsers soon. Resources https://www.w3.org/TR/web-share/#sharedata-dictionary https://alligator.io/js/web-share-api/ https://web.dev/web-share/...
Feb 7, 2020
3 mins
PWA Push Notifications with Firebase (Cloud Messaging)-pt1
Push Notification In Your PWA Have you ever wondered how to add the famous/annoying push notifications to your app? Well, in this tutorial I'm going to show you how to do it using Firebase Cloud Messaging. *Note:* This tutorial requires some basic knowledge on PWAs and Service Workers. You can take a look to my Intro to PWA and Service Workers here and About PWA and notifications here. Before we begin, I need to clarify that the Notification API, and the Push API, are not the same. People get them confused all the time. Push API: The Push API gives web applications the ability to receive messages pushed to them from a server, whether or not the web app is in the foreground, or even currently loaded, on a user agent. This lets developers deliver asynchronous notifications and updates to users that opt in, resulting in better engagement with timely new content. Let's doooo it!! The final code is in the FINAL branch inside of the repo. 1) Clone this repo: https://github.com/devpato/pwa-FCM-notifications-tutorial As you can see, I already have the basic structure of the app created for you, since we are only going to worry about how to send the messages via push notifications using the Firebsae Cloud Messaging service. 2) Navigate to the index.html file. Notice I imported Firebase for you: ` 3) Navigate to Firebase.com, and create an account if you don't have one. 4) Once you are in the Firebase console, navigate to project settings (in case you don't have a project yet - just create it there) 5) Inside of project setting, under the General tab scroll all the way down to find your Firebase SDK snippet (if it's not there yet - this means that you've created a new project, and need to add there an app. Either way, this can be done in the same place where you then will have your SDK snippet - under the General tab). Copy paste it in a safe place. The snippet should look like this: 6) Go to your index.js file, and copy paste the following after the global variables I declared for you. Replace it with your project's customized code - the snippet from step 4. ` 7) Right after - initialize the firebase instance. ` 8) Then, we are going to create a constant called messaging, and will set it to firebase messaging service. ` 9) Time to request permission from firebase cloud messaging. Once we get the thumbs up, they will give us a token as a promise. ` 10) Then, we are going to use the messaging.onMessage() method. This is used for receiving data, and notification payloads, by all users that are currently viewing the page (the page is in the foreground). To do so, we add the following code: ` 11) Notice a firebase-messaging-sw.js file. This file name is going to be searched by the Firebase SDK. The file needs to be in the ROOT of your project. The Firebase SDK will do some magic in the background to register the file as a service worker. 12) Inside of your firebase-messaging-sw.js, initialize the Firebase app by passing in the messagingSenderId. The sender id can be found inside of your project settings as the following image shows. ` 13) Retrieve an instance of Firebase Messaging so that it can handle background messages. ` 14) Background message handler (this one will be invoked when the page is in the backround) ` Test The Notification 15) Run the app using any http server 16) Inside of your Cloud Messaging settings (a tab in the Firebase Console > Project Settings), copy the server key. 17) If you have a Postman http client, do the following: POST URL:* https://fcm.googleapis.com/fcm/send * HEADERS: Content-Type - application/json Authorization - key=server_key BODY: ` Then, click the Send button. At this point, if our app is in the foreground (it is currently opened tab in your browser), then you'll see the message we've sent in the console - handled by messaging.onMessage. But if it is in the background, then it will be handled by messaging.setBackgroundMessageHandler in the service worker, and you'll see something like this: Test your app on a real device by deploying to Firebase or any other hosting provider. If you want to host your app on the Firebase - take a look at my other tutorial. In the next tutorials, I will show you how to successfully subscribe to notifications and push them using the Firebase console....
Feb 3, 2020
5 mins
Intro To Performance Analytics with Firebase
The Firebase suite includes multiple products, about which you can read more here. In this article, however, I'm going to talk about the Performance Monitoring product. I'm going to show you how to use it in an Angular app, but the process for React, VueJS, etc, is very very similar. What Is Performance Monitoring in Firebase? Thanks to this product, you can observe the performance of your app. By using the product, you see the areas for improvement in your code. This product can help you avoid crashes by increasing your code quality. Features Of Performance Monitoring - Customize monitoring for your app - Automatically measure app startup time, HTTP/S network requests, and more - Gain insight into situations where app performance could be improved Let's get started *Note:* I'm assuming you have a Firebase account, and any project there that can be used throughout this article 1) On the left navbar, inside of a Firebase console, you will see Performance. Click it. This is where your data will be populated after 12-24hrs of monitoring. 2) Now, go to project settings: 3) Then, scroll all the way down, and copy/paste the JSON with all your project settings in a safe place. If you don't see those settings as shown on the screenshot, you might need to register a new web-app for the current project (instructions on how to do this are given on the same page in Project settings > General). 4) Navigate to your project directory in the command line, and run: ` 5)Import the Firebase modules in your app.module.ts ` 6) Inside of your app.module.ts, make sure you add the above modules into the imports array as follows: ` 7) Now, in your service, or wherever you are reading the data from Firebase, you can add a trace to trace the time it takes to load the data. ` Note: *places* is the name of my collection inside of Firebase, and *placesQuery* is the name I gave to my trace. You can name it however you want. __Now your app is ready to start getting tracked by Firebase's performance tooling. __ Remember You can always write custom traces whether you are using Angular, React, or plain Vanilla JS. Time to view our App Performance Note: In order to see your app performance, you need to deploy your app and give Firebase approximately 24 hours to collect some data. 7) Go back to Firebase-> Performance Tab, you should see something like this: You will see this dashboard showing some basic data per country, and per enviroment you have used your app. 8) Now, click on View Traces, and click on the enviroment you want to be the traces. You will see a metrics dashboard If you click on View More, you will see more information about that specific metric. Check it out! 9) Now go back to the previous page and click on device tab. Then click on the trace you created to view the performance data. In my case, my custom trace is placeQuery. 10) After clicking on the custom trace, you will see a dashboard that is similar to the one in the picture below. Click on View More. 11) After clicking on view more, you will see some specific traces realted to your custom trace. As you can see, you have the option to see the metrics depending on different factors like the browser, country, etc. 12) You can also set parameters to see when the performance on the page is below the average by setting a threshold. All of these performance metrics will help you understand how your app performs in different conditions to improve the user experience for your customers....
Jan 28, 2020
5 mins
How to add Notifications to your PWA
Have you ever wondered how to add those annoying (but useful) notifications to your progressive web app? Well in this tutorial, I'm going to show you how! What are we building? Live Demo https://pwa-notification-td.firebaseapp.com/ Before We Start We will make use of the Notification API Notification API: The Notification interface of the Notifications API is used to configure and display desktop notifications to the user. These notifications' appearances, and specific functionalities, vary across platforms, but generally provide a way to asynchronously provide information to the user. *Note: *The notification API is not the same as the Push API. Time To Get Your Hands Dirty 1) Clone this repo: https://github.com/devpato/pwa-notifications 2) You will see 3 folders. The ones that matter are the START and the FINAL folder. In the FINAL folder, you can see the final code, but for the purpose of this tutorial, and for you to learn, just focus on the START folder. 3) Navigate to the main.js file inside of the scripts folder 4) add the following code ` The notificationButton is the button that will trigger the notification in our app. If you go to the index.html, you will see the button there that I've already created for you. The swRegistration is just a global variable that will store our service worker. 5) Now let's create a function called initializeApp. This function will handle everything that needs to be triggered when the app first loads. ` To learn more about the PushManger, visit : https://developer.mozilla.org/en-US/docs/Web/API/PushManager 6) When the app first loads, we need to call the initializeApp(). function. To accomplish this - add the call before the declartion of the function itself. 7) Now we need to create a new function called initializeUi. This function will look as follows: ` The only purpose of this function is to attach a click event to the notificationButton. So when the user clicks on the button, something will happen. 8) Now inside of the initializeApp() (function we previously created), we invoke the initializeUi();, right after the swRegistration = swReg; expression: ` By doing this, we will initilize the UI once the registration of the service worker has been successful. 9) Time to create a new function called displayNotification. The function will look like this: ` 10) Go back to the initializeUi() inside of the click callback, where it says "Do something here". Replace that line with: ` Your code will look like this: ` 11) Finally, we are going to create a notification function that will contain the information we want to display in our notification. ` 12) Inside of your displayNotification() function, you will see we are calling the notification(), but it's commented out. Simply uncomment it , so the code can be triggered. 13) The final code will look like this: https://github.com/devpato/pwa-notifications/blob/master/final/scripts/main.js 14) Test the notification in your browser. If you want to test it on a real device, you need to deploy it, and make sure that the deployed app gets served using https. You can you use firebase hosting for this. As you might have noticed, we registered a service worker, but we didn't add any code to it becaue it wasn't necessary. In the the next tutorial, we will actually be doing more with the service worker. In that tutorial, I will show you how to send push notifications from the server using Firebase Cloud Messaging. So, wait a bit and we'll explore much more about Service Worker features ;)...
Jan 21, 2020
3 mins
Web App Deployment with Firebase in 2 minutes
In this tutorial, I'm going to show you how to deploy your web app to Firebase in 2 minutes! (that's the goal 😏) Setting Up Firebase 1) Go to https://firebase.google.com/, and sign in with your Google account. 2) Go to Console 3) Click on Add project 4) Enter the name of your project 5) Disable Google Analytics 6) Click on Create project 7) Click on Hosting on the left sidebar 8) Now, on the main banner click on Get started 9) Install the Firebase CLI tool in your machine by running: ` Building Your Project 10) Before you can deploy your project, you have to build it. If you are using React or Angular, you can easily do this by running the following command: ` Note: Depending on the tech stack you are using (React, Vue, Angular, etc), a folder will be created after running the build command. This folder will contain your HTML, CSS, JS, etc. Firebase App Setup 11) Inside of your project, open the command line and run: ` 12) Then run: ` 13) Select Hosting 14) Select 'use an exciting project' and select the project you just created in Firebase. 15) When it asks you about the public directory, you select the folder that was created whenever you ran your build command. E.g In React it's build, and in Angular it's dist/Your-project-name 16) When asked to configured as a web app, enter Y 17) When asked about overwriting the index.html type N App Deployment 18) run the following command: ` After a successfull deployment, you should see something like this: Now, clicking on Hosting URL, should open the web app you just deployed. 19) You can also access the hosting url in your Firebase console. You can also setup a custom domain via the console....
Jan 13, 2020
4 mins
Realtime App With Angular and Firestore (AngularFire)
In this tutorial, I'm going to show you how to use Firestore, which is a realtime database from Firebase with Angular. We are going to make use of the basic CRUD opeartions as well as AGM (Angular Google Maps). Overview This application will help you to have a realtime map with a data table showing your favorite places that you have visted or want to visit, so you can share this info with your friends. Firebase setup 1) Go to Firebase, Sign in with your google account 2) Go to the console 3) Click on Add project 4) Give your project a name 5) Disable Google Analytics for this project 6) Click on Create Project 7) You will see a screen like this. Click on the web icon 8) Register your app 9) Copy the firebaseConfig object, and paste it somewhere secure, we will use it later on 10) Click on Continue to Console 11) Click on the big orange box that says Cloud Firestore 12) Then, on the top, you will see a button that says Create database 13) A modal will show up. Click on radio button Start in test mode 14) Click Next 15) Select your Firestore location 16) Click Done Angular Time to work on our Angular application. 1) Create a new angular app *Note: Make sure to select SCSS as you CSS compiler.* ` 2) Create a component for our form ` 3) Create a component for our list of favorite places ` 4) Create a component for our map with our favorite places ` 5) Create a new service as follow: ` Now, we are going to install all the packages needed, so we don't have to go back to our app.module file and deal with them later. 6) Install firebase ` 7) Install Angular Google Maps (AGM) ` 8) Go to your app.module, and add the following modules as follows ` 9) Generate a Google API Key Also, you'll need to make sure you have Maps JavaScript API service enabled in the Google Service Library 10) Copy the API key, and paste it in the AgmCoreModule inside of the app.module.ts 11) As you can see in the app.module.ts file, we have the following line: ` This line is using the enviroment variable. Go to the enviroment.ts file, and make sure your code looks like the following: ` *Note: Copy/paste the credentials we copied from the firebase console earlier in the tutorial.* 12) Inside of your index.html file, add Semantic UI CDN to give some quick styling to our app ` 13) Add the fontawesome CDN inside the index.html file Get your own CDN link here 14) Create a new model file with the name place.model.ts 15) Copy/paste the following code inside of the place model ` 16) Go to your places-form.components.ts file. We are going to create our form as follows: *Note: I'm also injecting via dependency injection, my places service.* ` 17) Inside of your places-form.component.html, copy/paste the code that contains the form. ` 18) Now, go to your places-form.component.scss file, and add the following styling. ` 19) Time to work with our places-list.component.ts file. Note: In this file, we are going to create an *Input()* that will take the array of places comming from our parent component. Also, notice I'm importing the places service, because we are going to call some actions inside of our service like the delete and edit ` 20) In the places-list.component.html file, you are going create the list that displays your favorite places. The last column will be an actions column. This column will allow you to delete or edit your data. ` 21) Time to style our table :) Lets make it look at least a little decent. Inside of your places-list.component.scss file, add the following code. ` 22) Time to add the favorites places to our map. Open the places-map.component.ts file, and add the following code. Note: As you can see, I'm creating an *Input()* that takes an array of places, which is the data that will populate our markers in the map. ` 23) Let's add the agm map component to our places-map.component.html file. Note: I'm looping throught the array of places to add the markers to our map. ` 24) Don't forget to specify the height of your map, or it won't appear. Specify the height inside of the places-map.component.scss file ` 25) Go to your app.component.ts file. We are going to create a variable that grabs the places stored in our Firestore databse. Note: As you can see, I'm injecting the places services via dependency injection. ` 26) In this step, we are going to add all of our components to app.component.html for them to be displayed in our application. Note: Notices I'm passing the places array to the inputs in the places-list, and places-map components. Also notice I'm using the async pipe to handle the subcription and unsubcription of the observable. ` 27) Let's add the main styling to our app to give it the shell structure. Go your app.component.scss file, and add the following code: ` CRUD with Firestore 28) Go to your places.service.ts, and add the following code: Note: the places$ field is an observable from firestore, and delete, add, update actions are promises. ` Time to run our app! 29) In your command line, run ` Note: You might see an error message telling you that something went wrong with the Google Maps API. In this case, you most probably need to enable billing for this project in your Google Cloud Account. No worries, you won't be charged since there is a free tier available. 30) Create some data, and you should see something like this: 31) Go back to the Firebase console, and see the Firestore console with the new data created. Don't forget to follow me on Twitter @devpato, and let me know what you think about this tutorial!...
Dec 11, 2019
5 mins
Angular Libraries with Nx for Enterprise Apps
In this tutorial, I'm going to show you how to work with an Angular library, inside of your Nx Workspace, in your next enterprise project. What is Nx? Nx is an extensible dev tool for monorepos. "Using Nx, you can add TypeScript, Cypress, Jest, Prettier, Angular, React, Next.js, and Nest into your dev workflow. Nx sets up these tools and allows you to use them seamlessly. Nx fully integrates with the other modern tools you already use and love." - Nx Team. Why Use Angular Libraries? You should use Angular libraries because sharing code across one app is easy, but sharing code between different projects requires extra steps. When we do encounter services or components that can be reused across different teams and projects, and that ideally do not change very often, we may want to build an Angular Library. Downside Of Using Libraries? - You have to link your library to your main project, and rebuild it on every change. - You will need to keep syncing your project with the latest version of the library. Advatanges Of Using Libraries? - We need to think and build these modules with reusability in mind. - Publish and share these libraries with other teams or projects. What are Monorepos? Monorepos are a source control pattern, in which essentially all of the codebase lives in the same repository. All projects will always use the latest version of the code. That's one of the reasons why Nx comes in handy when working with libraries. Advatanges Of Using Angular Monorepos? - Same library version for every app. - Ease of maintenance: when you update a shared library, you update it for all apps. - No conflicts between versions. For more information on Angular Monorepos Let's Get Our Hands Dirty 1) Run the following command in your terminal to install Nx globally. ` 2) Create a Nx Workspace. When asked about 'preset', select empty. ` When asked what CLI should power your Nx workspace - select Angular CLi Nx Workspace Structure 3) Add the capability to create Angular applications via: ` 4) Create a new angular app inside of your Nx workspace. ` Then it will ask you which stylesheet format would you like to use. Select sass. press enter The next question will be, "Would you like to configure routing for this application? (y/N)" Type y press enter Project Structure 5) Serve the Angular app, and go to http://localhost:4200. ` You should see something like this: For this app, we are going to create a library that contains an employee interface that will be shared across multiple applications. 6) Create a sharable interface with the following command: ` 7) Go to libs/employee/src/lib/employee.ts and "copy-paste" the following: ` 8) Go to your app.component.ts file inside of your employees application. Whenever you need to use the employee's interface inside of this workspace, you will import it to your file as following: ` *Note: If You are using vscode and doens't recognize it - restart vscode.* A cool thing about Nx is that, if you have your backend inside of this workspace, you can reuse this interface as well. Creating A UI Library 9) To create the ui library, run the following command: ` Your project structure will look like this: 10) Now go to your ui.module.ts. You file should look like this: ` Time To Create A Component In Our UI Library 11) Run the following command: ` Your project structure should look like this 12) Now lets go to your employee-list.component.ts file insdie of our ui library. - You will add the employee interface we created. - You will create an input that takes an array of employees. - We will add a trackBy function just for you to see how we create one for optimization. Your file should look like this: ` 13) Inside of your employee.component.html file ` As you can see, I'm using the trackBy function to promote better performance of our app. For more information on trackby visit this link. Creating A Service 14) Run the following command to create a service inside of our ui library: ` 15) Now go to your ui library, and search for your employee.service file, and make sure it looks like the following: ` 16) Now go to your index.ts file 17) Add the service to your file. Your file should look like this: ` 18) Now go to your ui.module.ts. The file should look like this: ` *__Note: you can see I have added the HttpClientModule and Nx has added the component for me already.__* Time To Use Our UI Library 19) Go to your employees app, and open the app.module.ts - Inject our library at the top of the file - Then add it to your imports ` *Our Ui library is ready to be used in this project.* 20) Now, open your app.component.html file inside of your employees app, and copy paste the following code. ` - This is where I'm injecting the employee-list component we created. 21) Open in your app.component.ts, and change it to match the example below: ` As you can see, I'm injecting the service we created inside of the ui library. 22) Go to your app.component.scss file, and add the following code. ` Bonus (Shared Assests) Now, I'm Going to Show You How to Share Assets Between Projects. 23) Go to your ui library, and create a subfolder called 'shared-assets', then create another folder called 'images', and add an image there. Then name it as shown on the picture. 24) Now go to your angular.json, and find assets. Your file should look like this: ` Restart VS Code to make sure it detects all the changes. Time To Test Our App 25) In your command line run: ` And We Are Done! :) About Author: --- *__Pato Software Engineer at This Dot | Auth0 Ambassador Twitter: devpato Stackoverflow: devpato Github: devpato AngularJax Meetup Founder__*...
Nov 20, 2019
7 mins
Angular Development in Enterprise
There are a few posts that teach you how to develop Angular applications but some of them are missing some of the tips that I'm going to mention here. FYI: some of the tips can be used in any kind of enterprise app, not just angular. I'm not going to get into detail on how to apply each one of the tips or tools. I will only talk about them overall for you to start applying them in your Angular enterprise project. Remember that all tips mentioned are not mandatory but will help your team to write cleaner, better, and more scalable application. Content Structure -Typing -SASS -State Management -Libraries -Monorepos -NPM for Enterprise -Lazy Loading -Components -Component Libraries -Reactive Programming with RxJS -Compilation -Design Systems -Angular with Bazel -VS Code Tools Typing Typing with TypeScript When working on such a big application, like an enterprise application, with a big number of developers, typing your code is very important. This will help the developers in preventing mistakes and understanding the code base faster. so... stop using ` Please, stop it! Typescript Entities -classes -enums -interfaces (and types) DON'T DO: ` DO: ` SASS Time to power up your CSS with SASS. By using SASS, you are going to be more DRY which means you won't be repeating yourself. Your CSS code will be more structured, cleaner, and more readable. When creating a new Angular project using the CLI, it will ask you "what stylesheet format would you like to use?", select SCSS. If you want to get started with SASS, visit the official docs: https://sass-lang.com/guide. State management It is very important to handle the state of your application. By handling the state of your app, you will gain some of the benefits like: -Better performance: The way Angular works when using state, the data updates can flow down through your components relying on slices of the store. -Centralized immutable state: The state living in a central location inside of your app. -Save time: Imagine you have an application with a very elaborated workflow where you have to write a bunch of data in the forms and click multiple buttons. Thanks to a tool like Redux Dev Tools, it allows you to travel in time in your application so you don't have to do all the workflow again to test your app - you can simply go to a specific point. -Easy to test: All state updates are handled in reducers which are pure functions. Pure functions are extremely simple to test, as it is simply input in and assert against output. A lot of people don't like using state management tools, so they decide to just use RxJS and services. If you have a very good data flow you may not need to handle the state with some of the tools previously mentioned, but you essentially are going to be inventing the wheel. If you are going to do that, you might as well use a tool that is used by millions of developers. Libraries If you are working in a big company the probability of you need to share multiple pieces of code is probably very high, so why would you make your engineers rewrite existing code? Thanks to Angular libraries you can avoid this by creating a sharable code like components, services, etc across your organization. Libraries will allow your apps to avoid code inconsistencies and different standards and will help your company to save money. How to create a library? https://medium.com/@tomsu/how-to-build-a-library-for-angular-apps-4f9b38b0ed11 NPM for Enterprise After talking about Angular libraries you may be wondering: how can I share them across my organization? Well, NPM offers solutions for enterprise applications. Your public npm package will be kept private and only visible/available to your organization. To learn more about NPM Enterprise visit: https://www.npmjs.com/products/enterprise Monorepos Not everything is pretty with Angular libraries when working on enterprise applications. -Every time a new change happens in a shared repo, you need to go to all your projects using this library and update their npm packages -Every shared library needs to have its own CI/CD workflow -Each CI/CD workflow should handle versioning of changes -There can be mismatches with different npm packages for angular projects which can lead to apps being broken -In general, harder to do changes across multiple apps and libraries as these are all in their own repository If you are working on an enterprise project, it's recommended to organize your code in bigger parts like common service, UI components, etc. Thanks to the Nrwl team, we can accomplish this when working with monorepos by using Nx in our angular projects. Lazy Loading Thanks to lazy loading, we can improve the performance of our applications dramatically. Imagine you have a huge enterprise app and you don't want the app to take a long time to load. People will lose their minds and will stop using your app. Lazy loading will help us achieve a better performance of our app by loading our ngModules on demand. Some of the advantages of lazy loading your angular app are: -High performance in bootstrap time on initial load -Modules are grouped according to their functionality (feature modules) -Smaller code bundles to download on initial load -Activate/download a code module by navigating to a route If you want to learn more about lazy loading, take a look at the official Angular docs or this awesome article/tutorial. https://angular.io/guide/lazy-loading-ngmodules https://blog.bitsrc.io/boost-angulars-performance-by-lazy-loading-your-modules-ca7abd1e2304 Components When creating an Angular app, I would suggest that you create 2 kinds of components: the smart and the dumb components. Smart components are the only ones that have access to the services usually via DI and the source of data. The dumb components will be used as pure functions hence no side effects should be created by them (something comes in and something comes out). Can I use smart/dumb components with state management? Yes, you can apply the concept of smart and dumb components when doing state management with tools like NgRx. When using smart and dumb components, you are going to come up with the need of using Input() and Output() to communicate between components. People have asked me: how far should I chain my components? I try to keep them to 1 level up and 1 level down. There may be special scenarios where you do 2 levels up and 2 levels down of component communication using Input() and Output() but please try to avoid this. If you want to learn more about Smart and dumb components, take a look at this link: https://medium.com/@jtomaszewski/how-to-write-good-composable-and-pure-components-in-angular-2-1756945c0f5b Component Libraries When working on enterprise Angular application, it is common to make mistakes and stop following standards and company's practices. A way to achieve consistency in your applications is by using component libraries like: - PrimeNG: http://primefaces.org/primeng/#/ - Angular Material: https://material.angular.io/ - NgBoostrap: https://ng-bootstrap.github.io/#/home - Ng-Zorro: https://ng.ant.design/docs/introduce/en - NgSemantic: https://ng-semantic.herokuapp.com/#/ In my personal opinion, for an enterprise application, PrimeNG is the way to go. They have over 80 components that are easy to customize via CSS and multiple companies in the industry use PrimeNG which translates to good support by the community. Design Systems You may be wondering: what about custom components? Once again, keeping the standards of your company, the design, and the consistency in your application is very important. If your company doesn't have a designated UX/UI designer, taking a look at design systems will be a good place to start for keeping this consistency in your application's design. Here are some great resources: -Semantic UI: https://semantic-ui.com/ -PrimeNG: https://www.primefaces.org/designer/primeng -Material Design: https://material.io/design/ -Polaris Shopify: https://polaris.shopify.com/ -Ant Design: https://ant.design/ Reactive Programming with RxJS Time to start thinking reactively in Angular applications. We have an awesome library called RxJS that will help us achieve this. When working with enterprise projects you are probably going to encounter getting data from multiple sources that depend on each other, or you will have to play a lot with multiple observable to achieve reactive programming. If this is the case, I'd suggest you take a declarative approach when using observables. Benefits of a declarative approach: -Leverage the power of RxJs observables and operators -Effectively combine streams -Easily share observables -Readily react to user's action To learn more about reactive programming, I'd suggest you take this course: https://www.pluralsight.com/courses/rxjs-angular-reactive-development When working on the Angular project, if I have to consume promises I try to convert them to an observable. I do this because I want my app to be as reactive as possible. There are a few specific cases where I wouldn't convert promises to observables. To learn more about Observables and Promises: https://medium.com/@mpodlasin/promises-vs-observables-4c123c51fe13 https://stackoverflow.com/questions/50269671/when-to-use-promise-over-observable Compilation Ivy is the new generation of the Angular compiler. Ivy will help you with your bundle size, re-build times, run-time performances, backward compatibility and more. To learn more about Ivy: https://angular.io/guide/ivy https://blog.angularindepth.com/all-you-need-to-know-about-ivy-the-new-angular-engine-9cde471f42cf https://medium.com/js-imaginea/ivy-a-look-at-the-new-render-engine-for-angular-953bf3b4907a Angular with Bazel Thanks to the Google team, now we have this awesome tool called Bazel in our hands. Bazel allows us to build and test our backend and frontend with the same tool. Bazel also helps your organization with continuous integration and it also helps with the build time. Bazel only builds what is necessary because Bazel uses a caching strategy where it only compiles what it has been changed or what is new. learn more about bazel: https://blog.ninja-squad.com/2019/05/14/build-your-angular-application-with-bazel/ https://bazel.build/ VS Tools After several years in the industry, I have noticed that having the same environment settings can help us avoid merge conflicts and have a consistent codebase, especially when working with multiple developers across different teams. The following plugins for VS Code will help your team develop your next Angular project. -Angular Snippets (Version 8). -Angular Console. -Angular Schematics. -Prettier. -TS Lint. -Auto Rename Tag. -Highlight Matching Tag. -HTML Snippets. -IntelliSense for CSS class names in HTML. -JavaScript (ES6) code snippets. -RxJs Snippets. -Paste JSON as Code. Got more? If you have any other suggestions on how to help a team be successful in their enterprise project, put some comments and I will add them to the article....
Oct 31, 2019
8 mins
Image Text/Face recognition with AWS Rekognition👀
AWS Rekognition What is AWS Rekognition? Rekognition is a AWS service that provides deep learning visual analysis for your images. Rekognition is very easy to integrate into your application by providing an image or video to the AWS Rekognition API. The service will identify some following: objects, people, text, scenes, and activities. "Amazon Rekognition also provides highly accurate facial analysis and facial recognition. You can detect, analyze, and compare faces for a wide variety of use cases, including user verification, cataloging, people counting, and public safety." - *AWS Official Docs* Now let's start using AWS Rekognition Let's start with trying some of their demos to see how AWS Recognition works. 1) Go to the following link and play with the demos. Time to get our hands dirty Warning🚨 : 1) You need to have an AWS Management Console account. 2) It will ask you for your credit card info, but YOU won't be charged for what you use in this tutorial since it's part of the FREE TIER. Setting up our S3 Bucket 1) Go to Find services and look for S3 2) Click on CREATE A BUCKET 3) Enter the bucket name as thisdot-rk-YOUR_NAME 4) Click on NEXT twice 5) Uncheck all the boxes to grant public access to the bucket. Click NEXT *Note: I'm making this bucket public, because for the purpose of this tutorial, I'm not worried about security.* 6) Click on CREATE BUCKET. 7) Time to upload some images to S3. Click on the bucket you just created. 8) Download this image and save it as thisdot.png. https://thisdot-rk-pato.s3.amazonaws.com/thisdot.png 9) Click on the dropdown from Mange Permissions, and click on Grant public read access to this object(s). 10) Click NEXT 11) On the Storage Class, select Standard, and click NEXT 12) Click UPLOAD Setting up our Lambda Function 1) Go to Find services, and look for Lambda 2) Click on CREATE FUNCTION 3) For Lambda function name, enter thisdot-rk-YOUR_NAME 4) Under Runtime, click on the dropdown, and select Python 3.7. 5) Click on CREATE FUNCTION 6)Scroll down to where it says Function code. You should see something like this: 8)Erase everything you see in the editor, and paste the following code in there: *Note: Change the name of the bucket to the bucket name you created thisdot-rk-YOUR_NAME.* The following code is going to help us finding the text inside of the images. Using the *.detect_text* method. ` *Note: To Learn more about other AWS Boto Rekognition functions, visit this website.* 9) Scroll down to change the BASIC SETTINGS< of the lambda. 10) Change Memory to 512MB, and Timeout to 2min 30sec. This is to ensure your lambda doesn't timeout when processing images. 11) Scroll all the way to the top. In the upper right corner, you should see the SAVE button. Click on it. Setting up our Security Roles Using IAM 1) Search for the IAM Service (Services IAM) 2) On the left navigation bar, click on ROLES. 3) You can select any lambda you have created to give it a specific role. In this tutorial, we will select the following to give it access to AWS Rekognition. 4) Then click on ATTACH POLICIES 5) Search for rekognition 6) Select AmazonRekognitionFUllAccess 7) Click on ATTACH POLICY *Note: You can have multiple policies attached* Time to Test 1) Go back to your lambda function. 2) In the top right corner, select the dropdown that says "Select a test event" 3) Then select "Configure test events" 4) Give a name to your event 5) Then enter the following JSON object ` Where "thisdot.png" is the name of your image inside of your S3 bucket. 6) Click CREATE 7) On Your top right corner, you will see the TEST button. Click on it. 8) You should see a green box. Click on expand details. 9) Take a look at the response object. As you can see, it has found our text inside of the image. Awesome!!!, right? Now, let's jump to compare faces. Imagine you want to see if one person appears in the same picture. Rekognition can do this. Imagine all the possibilities! 1) Download these 2 images. Source Image https://thepracticaldev.s3.amazonaws.com/i/ktpt1lx1ubzt3ilupph7.jpg Target Image https://thepracticaldev.s3.amazonaws.com/i/p5j8z6hiey8z8rkspms6.jpg 2) Upload them to S3, following the steps previously mentioned. 3) Go back to your lambda, and create a new test, or edit the existing test. Your test will look like this: ` 4) Then, we are going to modify our lambda code to be able to compare faces ` 5) Look at the Execution results, and analyze the data. Tell me what you think about this tutorial on twitter or comment below!...
Oct 31, 2019
6 mins
Let's innovate together!
We're ready to be your trusted technical partners in your digital innovation journey.
Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.