General

This Dot Labs Engineering Levels

Published Mar 10, 2020

Updated Dec 21, 2023

9 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

Introduction

There are many different qualities that make software engineers successful. Each company has their own unique set of needs regarding developer skill sets and seniority.

As we continue to grow in numbers at This Dot Labs, we’ve begun to ask ourselves what qualities we most look for in developers, what traits exemplify our conception of a senior engineer, and how we can drive mentorship at the company with clear guidance about how every employee can work towards their next promotion.

We’ve decided to share our thoughts with the community in the hopes of spurring conversations among your team. If you haven’t mapped out a career path for your engineers, we hope that you take the time to start talking about what that would look like. A clear purpose at work leads to higher employee satisfaction and retention, better outcomes for customers, and overall lower costs across the board. It’s truly a win-win-win!

What’s a senior engineer, anyways?

Titles are a funny thing. We know that they’re important. They convey responsibility, status, and achievement. When you’re applying for a job, it can really matter if your previous roles say “senior engineer” or “architect” instead of simply saying “developer”.

However, I’ve known people that tout their CTO experience of the small startup they co-founded, or brag that they were the Senior Architect of their 3 person company. Do their experiences match the experience of other CTOs or Senior Architects? Not necessarily.

More important than titles is what a person actually accomplishes at their job or enables for their customers or team members. Therefore, we think there’s a difference between the title “Senior Software Engineer” at a company and the concept of a senior engineer (as opposed to a junior or mid-level engineer).

Outside of the context of titles, we consider the journey from a junior engineer to a mid-level engineer to be a journey of learning. You gain knowledge by learning the software development patterns, rules, and how-to. The journey from being a mid-level engineer to becoming a senior engineer is a gain in wisdom. You learn how to transcend the rules and how to deliver value to your customers however you can with a strong knowledge of tradeoffs.

We’ve known “Software Developers” who were mid or senior developers, and we’ve known “Architects” who might still be mid-level in the grand scheme of things.

https://twitter.com/robocell/status/1062517501068804098

We want the difference between engineers and senior engineers to really mean something at This Dot Labs. Here are the key distinctions we make as our developers become senior developers:

Culture Stewardship - As developers make the leap to senior developer, we expect them to take an active role in promoting and improving the company culture. We want people to take ownership of their part in making the company culture vibrant, interesting, and inclusive. Building developer communities is in the DNA of This Dot, and we want our senior engineers to exemplify this both internally and externally.
Team Focus over Individual Focus - Mentorship is another thing that we take seriously both internally and with our customers and the community. Whether it’s the fact that every employee at This Dot Labs meets regularly with a mentor (and may have mentees themselves), that we invest in our Apprentice Program that helps women get their first job in tech, or that we offer training and mentorship to all of our clients as a key differentiator in our projects, we value the ability of our developers to help others grow, learn, and be successful. We expect our senior engineers to not only be responsible for their own performance, but also to make sure that everyone on their teams are fully successful as well.
Customer Awareness - Our senior engineers take a larger role in interacting with our customers on a daily basis. While all of our engineers work alongside our customers, and we center our customers in all of our work, our senior engineers are responsible for managing client expectations, establishing strategy, deciding milestones, and setting a good example for the other members of the team. At the end of the day, This Dot Labs is a software consultancy, and giving our customers a positive return on their investment in us is critical to our success.
Business Awareness - Many of us develop software both as a career and as a passion. However, we have to remember that we’re also operating a business that all of our employees rely on to support themselves and their families. Therefore, as our developers transition to more senior roles in the company, they are responsible for more of the financial success of their projects and the company at large.

Why not just hire all senior engineers?

At This Dot Labs, we love to talk about our PAM stack. In the PAM stack, we discuss that teams with junior, mid, and senior level developers are more successful (and cheaper) than teams made up of exclusively senior engineers.

A big reason why this is true is that our senior engineers are often asked to operate at a higher level of abstraction. Our senior developers think at the team or organizational level, consider both our internal staff and external customers, and have to consider both the technical and financial ramifications of their work.

We like to think of this in terms of something like Google Maps. If everyone is looking at the Google Earth view, you’ll miss a lot of details. But, if everyone is looking at the StreetView level, then you’ll miss a lot of context. We need people at different zoom levels to be successful as a company.

It’s important to have the right blend of developers. The right blend of developers means having people who are not only focusing on different levels of abstraction, but that those developers feel fulfilled in their career when focusing on those tasks. This is the value of having engineers of many different levels on your teams.

Introducing the This Dot Labs Engineering Ladder

Here is how we’ve decided to break down the engineering roles we currently have available at This Dot Labs. It’s important to also note that we’re a growing, primarily web, primarily JavaScript, primarily front-end, framework agnostic software consultancy. For now, we have a single-track ladder, but we’ll continue to revise and expand this in the future as our teams grow in both size and complexity.

Apprentices - Let Me Google That For You

Our apprentices are getting their first experiences working professionally as software developers. We expect our apprentices to participate in team activities, processes, and the company culture. Otherwise, we expect them to work under the supervision of other developers and/or mentors to complete tasks. Our apprentices are great and growing developers, and usually they have deep expertise in other fields before coming to software development. The extra support given for those in this role is to ensure our apprentices have successful first development experiences, which are so vital to getting more roles in the future.

Software Engineer I - Street View Developers at the Software Engineer I level are expected to participate in the company culture, write and test their code proficiently, work closely with other engineers to accomplish tasks and implement features, and to attend and contribute to all team meetings and processes.

These developers are able to deliver routine tasks on-time with limited supervision. These engineers are working with their mentors to learn software development patterns, best practices, and the software development lifecycle.

Software Engineer II - Neighborhood View Developers at the Software Engineer II level are responsible for all of the same things as those on the Software Engineer I level, but with a little more complexity and scope. These developers are responsible for helping guide and mentor more junior developers and apprentices. These developers are able to write and test code proficiently, but with a greater knowledge of design patterns, approaches, and libraries than more junior developers.

We expect these developers to deliver moderate tasks and features on time with little supervision. These engineers are working with their mentors to learn about software architecture, even more development best practices, and team leadership in preparation for becoming more team focused senior engineers.

Senior Software Engineer I - City View Developers at the Senior Software Engineer I level are responsible for activities at the team level. These developers are responsible not just for participating in the company culture, but they are relied to contribute to and improve it as well. These engineers have knowledge of several design patterns and architectural solutions.

These individuals are able to deliver significant features on time with little supervision. These engineers can work as either the lead engineer or technical lead of a client project. With their mentors, these developers are working on software architecture, team leadership, and soft skills. These engineers often mentor junior engineers and apprentices.

Senior Software Engineer II - State View Developers at the Senior Software Engineer II level are different from engineers on earlier levels in two significant ways. First, they are responsible for mentoring not only internal developers but also client developers, while also working with clients to define new features. Second, they are responsible not only for delivering excellent work under little supervision, but also helping a team to deliver their features on time as well.

These developers have advanced knowledge of coding standards and architectural approaches. These engineers not only attend and contribute to team meetings and processes, but can also lead those activities as well.

They are capable of operating as the technical lead on a client project. With their mentors, these developers are focused on team leadership, soft skills, and strategy. These engineers are responsible for mentoring engineers of all levels and the apprentices.

Senior Software Engineer III - Country View Developers at the Senior Software Engineer III level contribute significantly to the company culture and are recognized as leaders by their peers. These engineers regularly mentor other developers both internally and externally.

They have a deep knowledge of various frameworks, libraries, and architectural patterns backed with significant experience and wisdom. These developers work with team stakeholders to define new features and project strategy. Not only can these developers lead team processes and meetings, but they embody a spirit of process improvement.

These developers are focused on how to embrace quality and consistency across different project teams. They are capable of operating as the technical lead of multiple projects or the technical and project manager of a single project. These developers can manage and grow successful teams with little supervision. With their mentors, these engineers are focused on strategy, relationship management, and entrepreneurship.

Architect - World View At the moment, architects are the highest level in the engineering ladder at This Dot Labs. Eventually, it might become necessary to split the role up into more granular levels. However, developers at the Architect level contribute regularly and significantly to the company culture and represent the company in a public capacity.

These developers regularly mentor other engineers (both internally and externally), including senior engineers. These engineers have subject matter expertise in technologies, methodologies, processes, and/or patterns critical to the success of our customers. These engineers are responsible for contributing to the sales work of the company including the scoping of new contracts.

These developers are responsible for driving process improvement at an organizational level. They can operate as the technical manager, project manager, or client relationship manager of one or multiple projects. These engineers are able to drive organizational initiatives to success with little supervision. With their mentors, these engineers are focused on senior leadership, strategy, relationship management, entrepreneurship, and sales.

Conclusion

Having documentation like this on-hand is critical to the success of our mentorship relationships at This Dot Labs. People have a better understanding of what is expected of them, what they can expect of those around them, and how they should focus their goals and work to reach the next step in their careers.

We hope that this look into the engineering team at This Dot Labs will spark interesting and useful conversations on your team. If you like anything that you’ve seen here, please feel free to reuse any of our descriptions.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Rob Ocel
Software Architect and Engineering Lead, This Dot Labs Host, Modern Web Podcast and This Dot Labs Podcast 12 years software services experience Passionat about frameworks, mentorship and helping junior developers
@robocell @robocel

3 Web Performance Concepts that Will Help Start a Conversation Around Performance

In 2021, This Dot Labs released PerfBuddy, the free online platform for testing web and mobile based sites. With the release of this tool, it was our sincere hope to simplify the conversation around web performance, helping team leaders develop easy to understand metrics that they can use to advocate for further investment into their various web technologies. But we also realize that many new to web development, or who work in software but not as developers, might need more clarification on some of the basic key terms to help them engage more actively in conversations surrounding web development. Below, I’ve defined three of the top terms in web performance to help readers better ascertain your site’s performance, and play an active role in refining their technologies to provide the best experience for their customers. First Contentful Paint Time (FCP) FCP, or First Contentful Paint Time, is a critical metric that measures the time that users must wait in order for a page to load its first visible element. For some sites, this could be the entire page. However, for others, the FCP time might measure the seconds between a user navigating to a site, and any responsive element, such as a loading bar, appearing in front of them. This is not a measurement of backend nor even frontend script loading speed, but a metric that affords development teams the ability to infer the quality of their site’s initial UX. According to metrics published by Akamai in 2018, sites are liable to lose nearly half of their visitors if their page takes more than three seconds to load. In fact, just a single second of load time delay can result in a 7% decrease in sales conversions for eCommerce platforms. This is especially true when considering mobile users, whose likelihood of leaving a page increases 90% when made to wait 5 seconds for a page to load And as more eCommerce shoppers turn to using their mobile devices- with 53% of users accessing shopping sites via mobile platforms on 2019’s Cyber Monday, representing a 40% YOY increase- teams need to be acutely aware of their cross platform performance with respect to FCP. Time to First Byte (TTFB) Not to be confused with FCP, TTFB, or Time to First Byte, refers to the amount of time that the browser waits in order to receive initial data from its server. In order for a site to display any information, a browser must make dozens, if not more, data requests. Issues related either to the quality of the host, site functionality, or complexity can all contribute to a site’s latency, or the amount of time it takes for data to be passed between the server and the browser. Of course, reducing site latency will improve user experience by decreasing FCP, and generally increasing browsing speed. However, ensuring low TTFB will also boost your SEO by making your site more quickly crawlable by leading search engines. Page Weight As developers add features and functionality to support more advanced user experience, web pages get heavier. As of 2020, the average desktop webpage weighs 2080 KB, up from an average of 1532 KB in 2017, with the weight of mobile web pages slightly lower, but still seeing a near 40% increase in size when compared to stats from just four years ago. eCommerce websites need to maintain acute awareness of their page weight, and ensure that their latency is not overly impacted by it, due to the tendency for shopping sites to be especially complex, supporting large catalogs of products along with other features to promote customer engagement. And as this era of advanced digital transformation continues to expand, eCommerce sites must develop strategies to meet market expectations for performance without over burdening their sites with heavy plugins and functionalities. Finding Your Path to Performance It starts with equipping yourself with the right tools to test your site’s speed and weight. There are countless platforms used for testing sites, however, there are only a handful that are capable of unlocking the insight that you need to support your most critical websites. Though PerfBuddy is a great place to start in order to identify potential roadblocks, it cannot do the work of actually improving site performance. By leveraging testing platforms such as Lighthouse, and continuously improving your performance metrics with assets such as DevTools, and strategies like Google’s PRPL, eCommerce retailers can ensure that their sites meet user expectations and promote their most critical business objectives. Need help? Contact This Dot Labs to learn more about how developing the tools and strategies to ensure optimal site performance can support scalable growth as you continue refining user experience!...

Feb 9, 2022

4 mins

JavaScriptWeb PerformanceGeneral

Effective Communication Strategies Within The Software Development Organization

Have you ever been in a situation where you thought you were communicating effectively, only to realize later that the other person misunderstood what you were saying? Have you ever communicated with someone only to hear that they felt you provided way too much detail, or that you didn’t provide nearly enough detail? Communication in the workplace is how ideas, updates, directions, etc are transferred to others. Each party in a software development organization has differing needs and expectations when it comes to workplace communication. By learning to tailor your communication to meet the needs of each stakeholder, you can become a more effective communicator and achieve greater success within your organization. The requirements of various parties that you interact with in the workplace can vary wildly depending on several factors. Your awareness of these individualized communication preferences and how you can give each party what they want and need will impact your effectiveness in your daily activities, your perception by others, and even your upward mobility within the organization. That's the power of communication, and why it's so important to master effective communication strategies in the workplace! In this article, we'll explore the different types of stakeholders in a software development organization, the communication strategies that work best for each group, and how effective communication can help you advance your career in the industry. We'll start by discussing the difference between “communication” and “effective communication”, before diving into the different types of stakeholders in a software development organization. Then, we'll explore the communication strategies that work best for each group, and provide actionable tips for improving your communication skills. Communication vs. Effective Communication When it comes to communication, it's important to remember that the intended message is only effective if it's received and understood by the recipient, regardless of their background or level of familiarity with the topic. Effective communication is about sharing thoughts, ideas, opinions, knowledge, and data in a way that ensures that the message is received and understood by the recipient. With effective communication, the sender and receiver leave the exchange feeling satisfied. There is a shared understanding of what was intended to be transmitted by the sender. Stakeholder Types In any organization, you have many different types of parties involved in a software project. Let's group the parties involved in software development into three categories for the sake of clarity: - Development Team - This consists of individual contributors, project managers, scrum masters, QA testers, UX designers, UI designers, architects, etc. - Product Team - The product team is made up of a diverse group of individuals, including product owners, business analysts, architects, and more. - Executive Team - CTO, CEO, etc. Each of these parties requires a different type of communication, a different level, and has different needs from your interactions to allow you to provide value from what you are saying and to for them view you as an effective communicator. Let’s talk a bit about what each of these parties needs, and how you can interact with them in the most meaningful way possible. Development Team This is the most detailed version of the interaction. This group needs to be communicated with on the level of individual tickets and the details of those tickets. When interacting with the development team, it's important to focus on the nitty-gritty details of each task, ensuring that everything is sorted through meticulously. With this group, we will sort through specific implementation details. An example of interaction with someone from this group might look like this, “I am currently working on ticket 473, and trying to get the checkbox to behave correctly during testing. I have no blockers currently.” Product Team This group will be communicated with at the level of features and larger increments of work such as project milestones. This group is interested in chunks of a project, milestones, progress on the overall initiative, etc. An example of interaction with someone from this group might look like this, “The team is wrapping up development of the new Project X User Interface and will be moving to the implementation of the functionality next”. Executive Team This group is interested in the conversation at the highest levels of abstraction. Generally, they will be more concerned with things at the overall project level. When updating the executive team, it's important to provide high-level updates that summarize progress and focus on next steps. For example, you might say, 'We're making great progress on Showcase X and are on track to complete it soon. Next, we'll be shifting our attention to project Y.' Types of Communication What are some of the types of communication? It’s a great question. When you begin to study various communication styles, you will read about different personality types, and how those personalities interact with the world around them. You might hear things like aggressive, passive-aggressive, passive, and assertive communication styles. While understanding these can help you communicate effectively, we will focus on how different roles in a company require different levels of detail and specificity in their interactions. Your Natural Communication Style We all have a natural way that we prefer to communicate. Some are very direct and assertive. We might tend to be very to the point, with no filler, no fluff. Others might naturally tend to be more verbose, to fill in lots of details and context and information. Some naturally meet somewhere in the middle on the spectrum of detail vs direct higher-level type of communication. There is no right or wrong answer, but you must be aware of your natural tendencies in conversation, and know how to use those effectively, or tailor your communication style to a specific situation or audience. Benefits of Tailored Communication What are the benefits of tailored communication? The primary benefits of tailoring your communication to different stakeholders are that you can provide each person with what they want and need in a way that resonates with them. For instance, I once had to adapt my communication style when working with a highly detail-oriented developer who preferred a more granular level of communication. This eases the amount of effort required by the other party to understand you, and allows them to be more effective in taking your message forward. It increases the perception of your effectiveness, and credibility in their eyes as well. If people know that you are someone who can communicate with multiple parties with varying interests and needs, and do so effectively, you will be trusted with more responsibility, and be given more opportunities. Using Effective Communication To Advance Your Career As you can see, developing effective communication skills is a powerful way to advance your career in the software development industry. How have you seen effective communication impact your work? People who are seen as effective communicators have staying power in an organization. They are viewed as competent and necessary. They are given positions of authority and trusted to get things done. I remember that, when I was just starting out in software development, I struggled to communicate effectively with stakeholders at different levels of the organization. But over time, I learned the value of tailoring my communication to each person's unique needs, and it has paid off in my career in countless ways. Basic Strategies For Improving Your Communication Know your audience When preparing for a presentation or conversation, it's essential to consider your audience and tailor your communication style to their needs. What are some strategies you use to ensure your message is received and understood? Write notes in advance, when possible Draw an outline or even the bulk of what you need to deliver before the time comes. Even if you don’t ultimately use these notes directly, preparing them will help you to distill your thoughts and clarify your message, as well as review that they have the appropriate amount of detail for the intended audience. Practice your delivery Though you will not always be giving a speech, talking through what you plan to say will help you to see gaps, smooth the flow, and make sure that you are comfortable with the material you will be presenting or communicating. Conclusion In this article, we learned about the importance of effective communication, strategies for improving your communication, and the direct and indirect positive impacts these improvements can have on your effectiveness and value in the organization. We explored various strategies and approaches to improve communication. Development in this area can yield amazing results for you as you make the investment to improve your skills. We hope you enjoyed this article, and found it helpful. If you have any questions please feel free to join the discussions going on at starter.dev or on our Discord....

Apr 26, 2023

6 mins

GeneralSoftware Engineer

Why You Should Consider Migrating From AngularJS to Vue

This year, the popularity and usage of React, Angular, and Vue has refused to slow down. We see continuous and persistent adoption and usage of these frameworks and libraries in both the front-end and back-end JavaScript communities. As AngularJS is faced with an uncertain future, many teams are searching for answers to the current hot topic: if you are using AngularJS, do you continue to maintain your AngularJS applications or do you migrate your applications to another framework? This is not an easy (or cheap) question to answer. In this article, we’ll go over some of the reasons why you should consider migrating your AngularJS applications, and some ideas on how to plan and budget for a successful migration. AngularJS vs Angular — The History Behind Angular 1.x and Angular 2.x “Wait, isn’t AngularJS the same thing as Angular?” Well, not exactly… AngularJS is a front-end JavaScript framework that was first published by Google in 2010. AngularJS grew to be perhaps the most popular front-end JavaScript framework in web development. In concert with technologies like Apache Cordova, AngularJS has been a huge force even in mobile application development. During its early lifespan, AngularJS was known colloquially to the community as simply “Angular”, which confuses many to this day. In 2016 Google released a completely new framework that they called Angular 2. While Angular 2 was in development, people distinguished the two frameworks, AngularJS and Angular, by calling the first Angular 1.X and the second Angular 2. As the Angular team moved to a semantic versioning scheme (the current major version of Angular is 6.X at the time of this post), suddenly, calling Angular v6.0 “Angular 2” was confusing as well. To reduce confusion, the Angular team launched the “It’s Just Angular” campaign, helping create guidelines about how to refer to the different frameworks. The original Angular framework should be referred to as AngularJS and the new Angular framework should be referred to as simply Angular. A great way to figure out if applications are Angular or AngularJS is to look at the date the application was created. Applications that claim to use “Angular” and that were built in 2016 or before are likely using AngularJS (popular versions include 1.2, 1.5, 1.6, and 1.7). Embedded content: https://medium.com/media/afa879bfa6d7b9070019be6885f8be5d Sunsetting AngularJS The AngularJS team recently announced that starting on June 1st, 2018, AngularJS would enter a 3 year “long term support” phase. As of July 1st, the AngularJS team has committed to only releasing new patches to address the following concerns: * Security flaws in the 1.7.X release branch * Incompatibility with a major browser release affecting production applications * Incompatibility with a jQuery library release affecting production applications Come July 2021, any applications that continue to use AngularJS are susceptible to any of the above issues going forward and any other issues with the framework. Why Migrate Now? There are a few reasons to begin migrating your AngularJS applications now: * The cost to migrate increases over time as the deadline approaches * Security and compatibility issues are your problem now * Difficulty finding new hires with AngularJS experience * Brain drain with current staff * Hard technology constraints Framework migrations can be difficult, expensive, and require significant planning and coordination. Waiting until the last minute or until major issues arise to start planning for a migration adds additional risks of issues affecting customers. Waiting also drastically increases the costs of migration due to the possible need to pay for expedited consulting services. Security or compatibility issues? If a security or compatibility issue is discovered in AngularJS after the Long Term Support phase ends, it could expose your customers to the effects of data theft or major product outages until the application can be re-platformed. Hiring AngularJS developers to support your application is getting increasingly more expensive as expertise in the framework becomes ever more rare. Newer developers entering the workforce are predominantly using frameworks like Angular, Vue, and React instead of AngularJS. AngularJS developers within your organization will want to stay current and relevant in the job market. There will be a growing desire internally with your current staff to want to use newer frameworks that are dominating the marketplace and the conversations right now. Migrating now decreases the risk of a brain drain as your developers may start looking for opportunities to leave and join companies with a fresher technology stack. Lastly, newer frameworks have features that cannot (easily) be supported by AngularJS. The newer frameworks such as Angular, Vue, and React were built on top of lessons learned from the era of AngularJS. These new technologies tend to be faster, more ergonomic, and provide better support for modern tooling such as webpack. The features of modern frameworks help your developers deliver new features more quickly and efficiently while enabling them to effectively leverage new web APIs. The modern methods of development can help improve the experience of your customers, lead to more online engagement, and help increase revenue after a successful migration. The need to migrate from AngularJS is no longer a matter of “if,” but is instead a matter of “when.” Therefore, it makes sense to start planning for the migration now, so your team can more quickly take advantage of the new features of these frameworks. Which Framework Should We Use? The three largest and most popular front-end JavaScript frameworks used today are Angular, Vue, and React. Each framework has its own vast set of: * Developer tooling and documentation * Widespread adoption across small, medium, and enterprise-level applications * Extensive third-party library support * Comparable feature sets In the choice of which framework to migrate to from AngularJS, there is no definitive right answer. However, in our experience at This Dot Labs helping clients migrate AngularJS applications, Vue has on average provided the most natural fit for AngularJS development teams. There are many reasons for this, but the most prominent ones are: * Templating syntax — Vue’s templating syntax closely matches that of AngularJS, making AngularJS developers feel very comfortable in the new framework. * Reactive model — Vue’s reactive model is very similar to that of AngularJS, which allows AngularJS developers to adopt the mental model of Vue much faster than comparative frameworks and libraries. * No additional JavaScript syntax or additional libraries — Vue doesn’t rely on a lot of additional JavaScript syntax or additional libraries that also need to be taught to developers, which is helpful for ramping up quickly. We’ve found it common for AngularJS developers to get fully up-to-speed on Vue development with less time and less direct training than a similar move to other popular frameworks. Vue also provides a very clear, incremental migration strategy for AngularJS projects. Vue and AngularJS play nicely with each other side-by-side while features are ported over one at a time. AngularJS controllers and templates can be converted or translated into Vue components in a systematic and repeatable way. It doesn’t matter whether you’re using the latest versions of AngularJS (1.5, 1.6, or 1.7) or older supported versions (such as 1.2); the path to upgrading from AngularJS to Vue can often be a straightforward, mechanical process. Successfully Migrating to Vue from AngularJS The key to every successful migration effort is having a solid plan. The goal should be to execute the migration while: * Minimizing feature regressions * Avoiding platform downtime * Continuing to deliver new features to customers Setting Up Your Application For Migration To accomplish this, you should set up your AngularJS application so that it can simultaneously render both AngularJS and Vue components. This will let you build new features in Vue and port over existing features from AngularJS as you have time, budget, and resources. How To Begin Vue and AngularJS Integration Hosting Vue components in AngularJS can be surprisingly simple. All you need to do is include a script tag pointing to the Vue framework. Then, create your Vue instances pointed to particular DOM nodes in your application. Vue can be set to run alongside your existing AngularJS application in a parallel branch of your document OR Vue components can be included in existing AngularJS components and fully controlled by Vue. You can even do some data and event passing between layers. A simple version of this approach can be seen in this CodePen from David Rogers: Embedded content: https://medium.com/media/ab4818d62b3c0d7d4e61c670212d5cbe Converting AngularJS Components to Vue Components The next step is to begin converting your existing AngularJS components to Vue components. This means converting AngularJS controllers into Vue instances. Then, any AngularJS lifecycle methods are converted directly to the equivalent Vue component lifecycle methods. Lastly, the AngularJS templates are copied into the Vue component and the AngularJS template syntax is replaced with the equivalent Vue template syntax (ex: replacing ng-if with v-if, ng-repeat with v-for, etc.) AngularJS to Vue Migration Code Example In this example, we are taking the following (slightly altered) snippet of templating from the AngularJS implementation of Todo MVC and converting it to a Vue template. {todo.title} Below is a straightforward conversion of the AngularJS implementation to a Vue template: {todo.title} Migrating AngularJS Services One of the great things about migrating is that any AngularJS service can simply be converted to an ES6+ module. There is no need in Vue to register services as is done in AngularJS. Using ES6 modules and import statements will help bundlers like Webpack minimize the footprint of your code by intelligently tracking the dependencies between your modules and optimizing what code is bundled together and delivered at run time. If you still want to leverage the AngularJS dependency injection system for these services, you can wrap your now-converted services in thinner AngularJS service objects like you would wrap third-party libraries like lodash. What’s Next? Early on, there is no need to add a parallel build step during your migration, no need to immediately use Vue CLI, and no need to tinker with Webpack build configurations. You can begin using Vue code with your existing build tooling. When your team and product is ready, then you can start bringing in the more advanced and involved tooling. Successful migrations are ones where the pace of change and the introduction of new technologies is measured. However, after the majority of your application is migrated to Vue, you can begin to invert your tooling from being a AngularJS application that hosts Vue, to a Vue application that perhaps hosts some of the remaining AngularJS code. This process allows you to begin leveraging the power of the Vue tooling ecosystem, set-up a build and bundling step, and start using Vue Single File Components. Later, you can begin refactoring and optimizing some of the previously converted components from a strictly 1:1 translated format to formats that more naturally fit the Vue model, and leverage more advanced features in Vue. You will also be able to begin incorporating additional Vue libraries and features such as Vuex. Conclusion With support for AngularJS set to end in the next three years, migrating to a newer framework will help you and your team avoid issues that may come from the lack of direct support and get your development team excited again about development. You will be able to attract talent easier and improve the speed and performance of your application and developers. But, committing to a system migration without a plan is a recipe for disaster and may slow or halter new feature development. Without an effective plan, you may experience defects, regressions, and excessive unplanned costs. Vue is a natural and proven migration target for AngularJS teams. It is straightforward to learn and allows for incremental migration of any AngularJS application alongside a new Vue application. We hope this article has helped guide your AngularJS migration efforts and wish you the best of luck in your migration journey....

Oct 28, 2019

9 mins

AngularVue

Building a Stripe App: A Step-by-Step Guide to QR Code Generation

Building a Stripe App: A Step-by-Step Guide to QR Code Generation Why Build a Stripe App? I recently participated in an audio space with the Stripe team, and something they said really stuck with me: the Stripe app store is a growing area that isn't overly saturated yet. There's a lot of potential for new apps, and companies can use this opportunity to grow. I work at a company called This Dot Labs, and we've created several Stripe apps and even own one. After looking at the data, I can confirm that the Stripe team was right! Creating a QR Code Generator App For this tutorial, we'll build a QR code app that can take a URL and generate a code for it. This is a good use case to help you understand the ins and outs of Stripe's developer tools. Why QR Codes? QR codes are useful tools that have become common in e-commerce, restaurants, and other industries. While Stripe already has a QR code tool, we'll make our own to familiarize ourselves with their syntax and problem-solving approaches. Project Structure Before we dive into the implementation, let's look at the structure of our Stripe App QR Code project: * .vscode: Contains settings for Visual Studio Code * source/views: Holds the main application views * .gitignore: Specifies files to ignore in version control * stripe-app.json: Defines the Stripe app configuration * ui-extensions.d.ts: TypeScript declaration file for UI extensions * .build: this is where the built Stripe app gets placed. Step-by-Step Implementation 1\. Install Stripe Locally First, you need to install Stripe on your local machine. The documentation provides great instructions for this: * For Mac users: Use Brew to install * For Windows users: Download the package and add it to your environment variables You can find the details here in the stripe docs to install the Stripe CLI https://docs.stripe.com/stripe-cli When using Windows, you must do stripe login from Powershell, NOT from Git bash or any other tool. After the server is up, then you can continue using git bash for everything else. After stripe login, you need to enter stripe apps start. Once you do that, the server is up and running and you can go back to using git bash or any other tool. 2\. Install Dependencies We'll be using an extra package for QR code generation. Install it using npm: ` 3\. Set Up the Main Component Let's look at the home.tsx file, where we'll use Stripe's UI components: ` These components are similar to other UI libraries like Bootstrap or Tailwind CSS. 4\. Create the UI Structure Our app will have: * An input field for the URL * Validation using a regex pattern * Error handling for invalid URLs * QR code generation and display Here is the Home.tsx file that is located in the src/views folder ` * ContextView` is at the top level of the app where we see the Title and the link to the Stripe Docs that we placed in our Context View. * Box is how you use Divs. * Banners can be used to show notification errors or any other item you wish to display. * Textfields are input fields. * Everything else is pretty self-explanatory. 5\. Handle Content Security Policy One problem I personally ran into was when I tried to redirect users, the Stripe policies would block it since I did not express that I knew what it was doing. I had to go into the stripe-app.json file and mention the specific security policies. For this particular exercise, I kept these as null. This is my stripe-app.json file. ` 6\. Configure App Views As you can see here, the stripe-app.json file shows the views for each file I have. The Home.tsx file and the Invoice.tsx are also included This is our way of saying that for each view we have, show the app functionality on that page. Our stripe-app.json file will show it but also, the manifest.js file in our .build folder will also show the same. Any view that doesn't have a file will not show the application's functionality. So, if I were to go to transactions, the app would not show the same logic as the home or invoices page. By following these steps, you'll have a fully functional QR code generator app for Stripe. This is just a simple example, but the potential for Stripe apps is massive, especially for businesses serving e-commerce customers. If you need help or get stuck, don't hesitate to reach out, danny.thompson@thisdot.co. The Stripe team is also very active in answering questions, so leverage them as a resource. Happy coding!...

Dec 18, 2024

4 mins

stripe

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.

This Dot Labs Engineering Levels

Introduction

What’s a senior engineer, anyways?

Why not just hire all senior engineers?

Introducing the This Dot Labs Engineering Ladder

Conclusion

Rob Ocel

You might also like

3 Web Performance Concepts that Will Help Start a Conversation Around Performance

Effective Communication Strategies Within The Software Development Organization

Why You Should Consider Migrating From AngularJS to Vue

Building a Stripe App: A Step-by-Step Guide to QR Code Generation

Let's innovate together!

You might also like

3 Web Performance Concepts that Will Help Start a Conversation Around Performance

Effective Communication Strategies Within The Software Development Organization

Why You Should Consider Migrating From AngularJS to Vue

Building a Stripe App: A Step-by-Step Guide to QR Code Generation