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.
Announcing October JavaScript Marathon - Free, online training!
Join us October 28th, 2020 for our next JavaScript Marathon! JavaScript Marathon is a full day of free, online courses on React, TypeScript, GraphQL, and more. Come learn about some of the leading web development technologies, and concepts! Stay for one training, or stick around for the whole day! No two sessions will be the same! --- React Hooks 201 *Featuring Kyle Hill @ 11:00am - 12:00pm EDT* It might have taken a little while, but: have you mastered the use of useState, and maybe even (mostly) understand what useEffect is doing at this point? Cool. Let’s level up our React Hooks skills further by diving into some of the other tools in our box. We’ll leverage useContext and useReducer to create an easy to implement interaction and data flow that scales along with your application and your team. --- Getting Started with Eleventy *Featuring Kyle Mitofsky @ 12:30pm - 1:30pm EDT* Eleventy is a JavaScript based Static Site Generator (SSG) that's designed around performance, accessibility, and simplicity. Take your first steps to build out front end designs, websites, and content with this walk through that'll get you set up on your first eleventy site. Learn some of the basics with some patterns and best practices as well. --- TypeScript for Beginners *Featuring Dacey Nolan @ 2:00pm - 3:00pm EDT* During this introduction to TypeScript, we will cover what TypeScript is, what benefits it provides, and how you can use it in your projects. Code with me or just follow along as we dive into each of the types and learn how to use them. --- Automating GraphQL Client Code Generation *Featuring Kevin Wolf @ 3:30pm - 4:30pm EDT* In this talk, we will learn how to streamline Front End Development by generating type-safe GraphQL Operations for Apollo Client. --- Building GraphQL Resolvers *Featuring Josh Oppenheim @ 5:00pm - 6:00pm EDT* Have you ever wanted to know how graphql resolvers work or why we use them? In this training we will talk about the philosophy behind resolvers and how they fit in the greater GraphQL flow. We will take a look at how the graphql-js library implements them and we will write some of our own. We will discuss some possible requests from consumers and write resolvers to accommodate the needs presented. --- Need private trainings for your company? If you would like to learn more about how you can leverage This Dot’s expertise to upskill your team, and reinvigorate your developers with new knowledge about the web’s leading development technologies, visit the trainings page....
Sep 23, 2020
2 mins
Announcing September JavaScript Marathon - Free, online training!
Join us September 23rd, 2020 for our next JavaScript Marathon! JavaScript Marathon is a full day of free, online courses on Angular, React, Vue, RxJS, Web Performance, and more. Come learn about some of the leading web development technologies, and concepts! Stay for one training, or stick around for the whole day! No two sessions will be the same! --- React Native in 60 Minutes - Introduction to Creating Your First Hybrid Native Application *Featuring Rob Ocel @ 11:00am - 12:00pm EDT* So, you know React, and you want to build a mobile application - how do you get started? In this training, we'll discuss the architecture of React Native and how it differs from competing approaches such as Progressive Web Applications, Ionic Capacitor, and Apache Cordova. Then, we'll make a basic application from scratch that uses data from remote APIs and device sensors, and we'll show how to test and debug the application on your device and in simulators. --- Using Angular Libraries in an Nx Monorepo *Featuring Patricio Vargas @ 12:30pm - 1:30pm EDT* Learn how to use Angular libraries and share code between multiple enterprise applications in your current or your future monorepo project using Nx by the Nrwl team. --- JavaScript Animations with GreenSock *Featuring Christina Gorton @ 2:00pm - 3:00pm EDT* Have you ever been to a website and wondered "Whoa, how did they do that?" In this session you will learn how to get started creating fun, interesting, and complex animations that delight users with the GreenSock animation library. --- Type-Safe Databases with Prisma *Featuring Ryan Chenkie @ 3:30pm - 4:30pm EDT* TypeScript is seeing huge adoption in all kinds of settings, from enterprises to open source projects to indie side projects. The promise of type safety via TypeScript is compelling: it allows you to catch a whole class of bugs before you even deploy your code. While there's a lot of focus on making your front-end and backend code type-safe, not as much focus is put on applying the same to your database access. That's where Prisma comes in. Prisma is a database toolkit that allows you to build type-safe databases with ease. It gives you a fully typed database client which means you get type hints, autocompletion, and you are prevented from accessing your database in an invalid way. In this session, we'll build a TypeScript node API that uses Prisma for database access. We'll see how Prisma can be used to give you confidence in how you access your data and how you can be more productive by using features such as the Prisma Schema Language, migrations, and more. --- Javascript-free Websites with .NET Blazor WebAssembly *Featuring Heather Downing @ 5:00pm - 6:00pm EDT* Curious about the development experience of building front-end with C#? Blazor WebAssembly makes it possible to replace all of your Javascript completely - even in the front end! Join us as we build a secure SPA in .NET and discover the tricks of debugging and the trade-offs of the server-side version of Blazor....
Aug 17, 2020
3 mins
Your first Vue 3 app using TypeScript
Vue 3 has been rebuilt from the ground up using TypeScript. Since Vue2, Vue has supported TypeScript and still does. However, these days, I sense a certain hype and interest to develop Vue 3 apps using TypeScript. Without any doubt, developing JavaScript apps using TypeScript is a life saver. TypeScript, in addition to the many goodies it brings, provides type safety. You will be happy, your IDE will be happy, and of course, it makes writing JavaScript more interesting and robust. This article will take you on a step-by-step guide to creating a Vue 2 app, adding TypeScript support, upgrading the app to Vue 3 RC 5, compiling the app, fixing some common compile time errors, and finally make sure the app runs in the browser. > If you’re new to TypeScript, I suggest you watch this free course Learn TypeScript from Scratch by the distinguished [Maximilian Schwarzmüller](https://academind.com/). > If, on the other hand, you want the source code accompanying this article, feel free to access it at this GitHub Repo. _Disclaimer - This article applies to existing Vue 2 apps that you want to upgrade to Vue 3 and add TypeScript to the mix, and to any new app._ Demo Let’s start by creating a Vue 2 app, and going through the necessary steps. Create a New App As the sub heading suggests, we will be creating a Vue 2 app using the Vue CLI. Step 1: Install @vue/cli NPM package Open a terminal window and run the command: ` Step 2: Create a new Vue 2 app ` Select the default preset when prompted. The CLI scaffolds the files for you, and also initializes a Git repository for the app. Step 3: Run the app Run the app to make sure it’s working properly: ` You should have a running app now! Add TypeScript Support Let's run the following command to add TypeScript support to our app. ` The command above downloads and installs the @vue/cli-plugin-typescript plugin to bring TypeScript support to our app. Once installed, you are asked a few questions that are shown in Figure 1. | Installation Questions | | ---------- | | Use class-style component syntax? Yes | | Use Babel alongside TypeScript? Yes | | Convert all .js files to .ts? Yes | | Allow .js files to be compiled? Yes | | Skip type checking of all declaration files? Yes | Among the many things the plugin adds to the app, I’d like to point out the tsconfig.json file at the root of the app folder. TypeScript uses this file to customize the compilation process, and gives you a chance to do so, to suit your needs. The settings below are recommended by the Vue team. However, feel free to add or change things as you see fit. > For a complete list of all the options available for you to use in this file, follow this link tsconfig.json. ` Finally, make sure to commit your changes to Git before moving on any further. Upgrade App to Vue 3 Now that the app supports writing Vue Components in TypeScript syntax, let's move on, and upgrade the app to Vue 3. Step 1: Add the Vue-Next Plugin Open a terminal window and navigate to the root folder of our app. Then, run the following command: ` The command downloads and installs the vue-cli-plugin-vue-next plugin to upgrade the app to Vue 3. Figure 2 shows all the steps the CLI has taken to perform the upgrade. Open the /package.json file, and make sure the dependencies and dev-dependencies sections are similar to the one below: ` The vue-next plugin automatically goes through your app files, and converts them to be compatible with Vue 3 syntax. Step 2: Fix Warnings & Errors At this point, if you compile the app, you will see some warnings and errors. These are mostly related to using TypeScript in Vue 3. Let's tackle these one by one. Run the following command to compile and start the app in the browser: ` The output is shown below: Warnings ` Errors ` The warnings and errors show that TypeScript is not able to digest the HelloWorld Component that's written in the old TypeScript syntax for Vue 2. Let's refactor this component to use the latest TypeScript syntax in Vue 3. Currently, the /components/HelloWorld.vue component's script block is defined as follows: ` First of all, notice the use of a lang="ts" attribute on the element. This defines a TypeScript code block instead of a JavaScript code block. Let's replace this code with: ` The code makes use of the new defineComponent global method. This method lets TypeScript properly infer types inside of the Vue Component options. The defineComponent method accepts an input parameter object. It can be an Options API object or a Composition API object. > You can read more about Options API and Composition API by checking my article on Vue 3 Composition API, do you really need it? Now that the HelloWorld component is refactored. Let’s move on, and refactor the App.vue component to use the new TypeScript syntax in Vue 3: ` Let's run the app by issuing the following command: ` Wow! More errors and warnings! ` Importing Vue Components The error above is generated for Line #2 in the main.ts file: ` Typescript, like ES 6, supports modules by using the keywords import and export. As long as you are writing your modules in TypeScript, that is, module files ending with .ts then you are covered. The error above signals that TypeScript is not able to import the App component, as if the App.vue module returned is not understood by TypeScript. The solution? Define a shim or declation file at the root folder of the app. This file has the extension of .d.ts. It basically makes it easier for the tooling to know how to handle *.vue files, also known as Single File Components (SFC). Locate the shim-vue.d.ts file at the root folder of your app and replace its content with the following: ` The code declares a TypeScript module for every file ending with *.vue (SFC). TypeScript will digest such a module as having the following: - An import statement for the defineComponent global method - Declaration of a component variable of type defineComponent - Finally, a default export of the component variable Having the shim file above allows TypeScript to consider any Vue Component to be a well-defined module. Run the app Now you can safely run the app knowing that it will run successfully inside the browser. Run the following command to start the app: ` Navigate to the URL http://localhost:8080 inside your browser and you should be able to see the default home page of a newly created Vue 3 app using TypeScript, as shown in Figure 3 below. Use Composition API with TypeScript Now that the application is TypeScript-aware, let me show you how you can make use of the Composition API and type safety to define a function with typed parameters. Replace the content of the HelloWorld component script with the following: ` Notice how the code defines a new function using the Composition API with a typed parameter. The parameter is named msg and has a data type of string. Conclusion Whether you are upgrading your existing Vue 2 app, or starting a new one, the article provides a step-by-step approach to adding TypeScript to the app, upgrading to Vue 3, fixing all warnings and errors, and finally running the app successfully in the browser. This is a stepping stone in your way to build Vue 3 apps with TypeScript. The next step is to familiarize yourself more with TypeScript. Happy Vueing!...
Aug 17, 2020
6 mins
Announcing July JavaScript Marathon - Free, online training!
Join us July 22nd, 2020 for our next JavaScript Marathon! JavaScript Marathon is a full day of free, online courses on Angular, React, Vue, RxJS, and Web Performance. Come learn about some of the leading web development technologies, and concepts! Stay for one training, or stick around for the whole day! No two sessions will be the same! --- Featuring Shawn Wang @ 11:00am - 12:00pm EDT In this session we will learn how to build a fullstack serverless React + GraphQL app from scratch with authentication, storage, and multiplayer realtime collaboration, all atop infinitely scalable AWS components, with AWS Amplify! It's never been this easy to go from idea to prototype, and each piece will be livecoded in front of your very eyes! --- Featuring Michael Hladky @ 12:30pm - 1:30pm EDT The async pipe is boring! Understand the guts of Angulars change detection and why zone.js is your biggest enemy. Learn the tricks on template bindings, component rendering, and where you pay the biggest price. As a cutting edge demo, you will understand how to analyze blocking UIs over flame charts and how to avoid them. In the end, you will be able to get zone-less performance even in zone-full Angular applications! --- Featuring Nathan Walker @ 2:00pm - 3:00pm EDT During this introduction to Nativescript, you’ll get a brief overview of what Nativescript is and how it works. You’ll also learn how to create a TypeScript, Angular, Vue, and React based app, + so much more! --- Featuring Cecelia Martinez @ 3:30pm - 4:30pm EDT Looking to add testing to your skill set or just feel more confident pushing to production? In this beginner-level talk, we will walk through the process of installing, configuring, and writing a critical-path test using Cypress. Written in JavaScript and built on the popular Mocha and Chai libraries, the free and open-source Cypress Test Runner gets you up to speed with end-to-end testing fast. We will also cover general testing strategies for beginners, including how to decide what to test and how to ensure your test suite is effective. --- Featuring Jesse Tomchak @ 5:00pm - 6:00pm EDT Setting up user authorization and authentication can be a minefield of security practices, token verification, valid callback urls, salt hashes, and more. Now take all those struggles and sprinkle them over serverless functions! When all we want to do is get past the login page to our actual application. We'll walk through setting up secure oAuth with AWS Lambda functions, covering common pitfalls, so that you can get back to the fun part of your project. --- Tune in next month for another full day of JavaScript Marathon! Need private trainings for your company? If you would like to learn more about how you can leverage This Dot’s expertise to upskill your team, and reinvigorate your developers with new knowledge about the web’s leading development technologies, visit the trainings page....
Jul 8, 2020
4 mins
Announcing GraphQL Enterprise Connect - a Remote 1 day GraphQL Enterprise Focused Conference
Are you using GraphQL? Join us in this 1 day conference on August 14, 2020 from 9am - 5pm PDT focused on *GraphQL in the Enterprise*. Featuring some of GraphQL’s best speakers and developers on panels and sharing real world experiences on GraphQL implementation, this event is the first GraphQL event focused on problems real companies face during adoption! This event is hosted by PayPal, Braintree, and This Dot. Check out the schedule below (PDT): 9:00am - 9:30am - *Keynote Panel * 9:0045am - 10:15am - *"Lessons from the Trenches : a retrospective on our first public GraphQL API"*, Rahul Dighe 1030am - 1100am - *“Building a GraphQL Platform ”*, Sam Parsons & Kyle DeTella 11:15am - 11:45am - *“GraphQL Security”*, Joey Nenni 11:45am - 1:00pm - Lunch break 1:00pm - 1:45pm - *Community Panel * 2:00pm - 2:30pm - *“Building a faster Checkout experience w/ GraphQL at PayPal”*, Vishakha Singh 2:45pm - 3:15pm - *"Persisted GraphQL"*, Brian Douglas 3:30pm - 4:00pm - *"Data federation with GraphQL for the enterprise"*, Allison Kunz 415pm - 5:00pm - *“Pushing your React + GraphQL Testing Further”*, Sergey Mykhailenko *Join us here!*...
Jun 30, 2020
1 min
Announcing Free Monthly JavaScript Training with JavaScript Marathon!
After such amazing feedback from our inaugural JavaScript Marathon in April, we have a very special announcement... Starting this month on June 24th, 2020, This Dot will be hosting monthly JavaScript Marathon trainings! These free, online courses will be on Angular, React, Vue, RxJS, and Web Performance. Come learn about some of the leading web development technologies, and concepts! Stay for one training, or stick around for the whole day! No two sessions will be the same! --- Featuring Kent C. Dodds @ 11:00am - 12:00pm EDT React Suspense is coming and it's going to be awesome. It's currently in alpha and you can play around with it. In this tutorial we'll focus on the fundamentals of how React Suspense works (in its experimental form) and how that can help improve the user experience. --- Featuring Brian Lagunas and Jason Beres @ 12:30pm - 1:30pm EDT Angular schematics drive the productivity features of the Angular CLI. With the added benefits of tools, such as Ignite UI from Infragistics, you can take the CLI to the next step with built in component and app templates, and customized themes, and more to kickstart the app experience you need. In the webinar, Brian Lagunas and Jason Beres from Infragistics product teams will walk you through how to use the CLI and how you can create your own customizations to bring hyper-productivity to your teams. --- Featuring Jake Dohm @ 2:00pm - 3:00pm EDT Come join us as we walk through the new Composition API that will be released as part of Vue 3. The Composition API is a way to abstract functionality in your application, using some new internal APIs that Vue is exposing. Inspired by React Hooks, it makes it much easier to share logic, data, and methods across components in your app. --- Featuring Justin Ribeiro @ 3:30pm - 4:30pm EDT With the latest release of Lighthouse, we have new metrics and tools at our disposal to make our web performance testing and tracing even better than before. In this training, Justin dives into what changed, how this affects your users, and why you should care about these latest advancements. --- Featuring Chris Whited @ 5:00pm - 6:00pm EDT We are going to learn how to create a new API using the NestJS NodeJS framework, and then use this API to connect to a database and build a REST API for creating, updating, and tracking issues. We will learn why NestJs is becoming one of the most popular NodeJs frameworks. --- Tune in next month for another full day of JavaScript Marathon! Need private trainings for your company? If you would like to learn more about how you can leverage This Dot’s expertise to upskill your team, and reinvigorate your developers with new knowledge about the web’s leading development technologies, visit the trainings page....
Jun 8, 2020
4 mins
Remote JavaScript Workshops for Enterprise Teams - Unveiling This Dot Lab's New Training Service
Over the past few weeks, many teams have transitioned their developers to working from home, and leaders are looking for innovative ways to support and continue team growth despite new operational challenges. We have put a lot of energy into thinking about how we can better serve our clients in the present working climate. Since 2016, our clients have leveraged This Dot’s onsite trainings to upskill their developers, establish foundations for new projects, and promote engagement within their teams. Today, we are proud to unveil a brand new catalog of remote JavaScript trainings for corporate teams. Topics include a variety of web development technologies and concepts relevant to modern JavaScript engineering and range from introductory to advanced. While custom trainings are available, our current catalogue includes: ReactJS Trainings ReactJS 101 Advanced React Architecture and Patterns React Testing React Hooks: Migration Strategies Web Components Training Web Components 101 Web Performance Training Web Performance 101 GraphQL Trainings GraphQL 101 GraphQL 201 GraphQL 301 VueJS Trainings Vue 101 Vue 201 Testing in Vue Angular Trainings Angular 101 Angular Accessibility 101 Angular Accessibility 201 Advanced Angular Architecture and Patterns Testing in Angular NgRx Trainings NgRx 101 NgRx 201 RxJS Training RxJS 101 A11Y/Accessibility Training Accessibility 101 Bazel Training Bazel 101 To celebrate our launch, we are offering any remote trainings booked during April at 20% off! These trainings can be purchased and used anytime within the year. If you are interested in learning more about how to leverage the talent and expertise of the This Dot Labs’ team and mentors, please reach out to us at hi@thisdot.co....
Mar 27, 2020
2 mins
Announcing Free JavaScript Training During the JavaScript Marathon - This Dot Celebrates Remote Corporate Training Courses with Free Classes All April
While we are all stuck at home and our Netflix queues are running out, we at This Dot are announcing free JavaScript courses for the month of April. The Javascript Marathon goes live every Wednesday with a full schedule of Angular, React, Vue, RxJS, and Web Performance courses as a celebration to the release of our new remote corporate training program. The series of free courses are a once-weekly day full of live training sessions on some of the leading web development technologies, and concepts! Starting Wednesday, April 1st, This Dot will host hour-long sessions, beginning at 12:30PM EDT, on React, Angular, Vue, Web Performance, and RxJS. Stay for one training, or stick around for the whole day! No two sessions will be the same! - April 1, 2020: 1 Hour to Learn React - April 8, 2020: An Introduction to Gatsby with React - April 15, 2020: An Introduction to Netflify with React - April 22, 2020: Using GraphQL with React - April 1, 2020: 1 Hour to Learn Angular - April 8, 2020: The Best Pro Tips for A11Y in Angular - April 15, 2020: Master PWA in Angular - April, 22, 2020: Advanced NgRx: Complex Angular State Management - April 29, 2020: Easy Angular Unit Testing in NgRx - May 6, 2020: A Guide to Advanced Angular Patterns (Route Guards, Pipes, Interceptors, and more) - April 1, 2020: 1 Hour to Learn Vue - April 8, 2020: Master State Management in Vue with VueX - April 15, 2020: Master PWA in Vue - April 22, 2020: Learning Unit Testing in Vue - April 29, 2020: Pro Tips on Using AWS with Vue - May 6, 2020: Debugging Vue: Quick Tips and Tricks - April 1, 2020: Web Performance: Basics - April 8, 2020: Web Performance: Budgeting for the Critical Rendering Path - April 15, 2020: Web Performance: Rendering faster with a shade of PRPL - April 22, 2020: Web Performance: Tracing with DevTools - April 29, 2020: Web Performance: Always Auditing with Lighthouse - May 6, 2020: Web Performance: Maintaining web performance in the long term - April 1, 2020: 1 Hour to Learn RxJS - April 15, 2020: Flattening Operators 101 - April 29, 2020: Subjects 101 More trainings are yet to be announced! Need private trainings for your company? If you would like to learn more about how you can leverage This Dot’s expertise to upskill your team, and reinvigorate your developers with new knowledge about the web’s leading development technologies, visit the trainings page....
Mar 25, 2020
4 mins
Supporting Emergency Remote Operations with the PAM Stack
On Friday, Donald Trump declared a State of Emergency in response to growing concerns about COVID-19. This declaration follows formal emergency classifications by nearly 30 states, including California, Washington, New York, North Carolina, and Arkansas, which many of the nation’s largest tech, pharmaceutical, and manufacturing/supply chain enterprises call home. In order to maintain operations while protecting employees, and preventing the continued spread of COVID-19, many large companies, including Google, Amazon, LinkedIn, Spotify, and Airbnb, are asking employees to work remotely for the time being. This has posed a number of problems for companies that are not equipped to maintain remote operations on a large scale for extended periods of time. Smaller companies that may not have the infrastructure needed to support fully remote operations, and lack the budget needed to make these rapid changes, will be most impacted by these challenges. And this anxiety may be amplified by the possibility that employees in enterprises both small and large may continue working this way indefinitely. As someone who has managed remote teams for the past few years, I understand many of the challenges that remote workers face, as well as the policies and procedures needed to ensure that remote work remains manageable for employees, and efficient for businesses. I believe the misconception that any work done exclusively on the computer can transition seamlessly from on to offsite belies the reality that remote structures radically change the culture and management style of businesses. It is my hope that companies will not only continue to encourage their employees to remain at home for their health and safety, but will also invest in improving their emergency operational procedures. In doing so, they will be able to maintain efficiency, and implement an infrastructure that supports reactionary, company-wide remote work in a way that suits both employee and employer. SUPPORTING LONG-TERM REMOTE OPERATIONS WITH THE PAMSTACK If you are familiar with the change management work that I and Rob Ocel, an architect at This Dot have been doing over the past year, you may have already heard of the PAM Stack. For those who haven’t heard of it, we generally define it as a modern architecture for building sustainable, inclusive development teams. Now, this system wasn’t exclusively built for remote teams, but applying the three guiding principles of the PAM Stack could significantly help leaders building management systems for employees who have recently transitioned to working off-site. Its three guiding principles are: Process, Abstraction, and Mentorship. PROCESS When transitioning to temporary remote work, especially in response to national and international emergencies, company goals are bound to change. And these changes will trickle into every department. If a company expects its employees to continue working under a drastically different operational culture, it is important that leadership establishes clear expectations and goals for their direct reports, and promotes transparency about those expectations to an appropriate degree. This can be supported by building out physical documentation that outlines departmental and even employee specific responsibilities. Of course, these procedures will have to be tailored to accommodate each unique circumstance, but should be guided by documentation written ahead of emergencies, without the pressure imposed by reactionary operational changes. Procedural documentation should also identify common points of error specific to the type of work being carried out, with consideration for what unique error points might arise due to the abrupt change from onsite to remote-only work. The inclusion of regular reviews, checklists, and metric keeping are all essential to maintaining better communication between employees within the same department, as well as positive interdepartmental communication. ABSTRACTION When managing a remote team, it is crucial to keep your tech stack as simple as possible. Development teams should only work with as diverse a tech stack as absolutely necessary in order to build and maintain their products, services, and proprietary internal tools. Companies should also be careful to prevent the use of redundant operational assets, and ensure that all employees are sharing as many technologies as possible. This means sales and marketing teams across a company should use the same suite of products; documents, passwords, and databases should all be accessible through the same interfaces, respectively, and communication should be conducted over as limited a number of channels as possible. Additionally, by using modern frameworks such as Vue, Angular, or React, teams equip their developers with powerful force-multipliers that abstract away irrelevant complexities, and will reduce the need for peer-to-peer reference due to the support of abundant educational resources, and documentation. MENTORSHIP According to a 2018 Spherion study, 35% of developers who do not receive mentorship look for new jobs within twelve months. Oftentimes, this is due to a feeling of isolation and immobility that may be exacerbated by an abrupt transition to remote-only work. This is a significant problem for leadership, since the cost of recruiting and training a new hire cost as much as double that developer’s annual salary. Unmanageable attrition will slow your team down, increase stress, and trigger panic hiring. All of these problems are tough enough for companies operating within their preferred work cultures, but may be even more difficult if encountered while a company is operating under an emergency procedure. Despite the additional communicative challenges presented by remote work, companies should maintain strong mentorship programs in order to maintain employee engagement and reduce the feeling of isolation common among even remote workers who elect to work remotely, and may be worse for employees compelled into full time offsite work. Of course this mentorship can be unstructured and organic- taking the form of natural conversations and friendships between developers on the same team. But teams should also incorporate an intentional program that includes pair programming, code reviews, and lunch & learns, all of which are still maintainable within remote work cultures. PLANNING FOR AN UNCERTAIN FUTURE It is my sincere hope that the threat presented by COVID-19 is managed as soon as possible, and I applaud any company that shoulders responsibility for combatting its spread through radically changing their operational structures. However, I believe that companies not only need to prepare for the possibility that workers may be unable to return to their offices any time soon, but need to implement procedures that encourage a more seamless transition from onsite to offsite work in instances of natural disasters, pandemics, or other states of emergency in the future. By adopting PAM Stack principles, companies are better able to maintain the health and wellbeing of not only their businesses, but more importantly, the human lives that depend on large, multinational companies being able to radically transform their operations without hesitation. If there is any way that I or Rob could help you in this transition, please do not hesitate to reach out at hi@thisdot.co....
Mar 16, 2020
5 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