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

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

Common Interview Questions & What They Mean

Introduction Who hasn't been asked some weird and interesting questions in previous interviews? Interviewers are known for asking a variety of weird, interesting, and confusing questions to possible employees for a variety of reasons. And this makes sense because they want to know as much as possible about you in the limited interview duration. Here are some interview questions you might be asked and what the interviewer is trying to find out about you from your answers: Introduce yourself Here, the interviewer is not really interested in your answer. What they are looking at your confidence and your passion, so this is the best time to show them your communication skills! So, you should tell them about your education, where you grew up, your past work experience, your hobbies, and your personal interests! Be calm, relaxed, and confident! What are your strengths? Here, the interviewers want to know how positivly you think about yourself! It’s a quite general question, so there is no right or wrong answer for it! So it’s a good opportunity for you to share what makes you so unique, and what are you good at! But you should tie your strengths to what they’re looking for! That’s why you should read the job description very carefully, and get a good understanding of what they are looking for, and then try to fit yourself in there! What are your weaknesses? In this question, the interviewers are looking at is whether you can identify your weaknesses, and how you can cover them up! You need not be really negative about yourself! For example, don't say “I am a very impatient person”, or “I am getting angry easily”. The best way to answer this question is to talk about a weakness that you had that isn’t related to the job, and what you did to overcome it. That way, they can see a progression, and that is what they really want to hear in the answer! What is your expected salary? Here, the interviewers, of course, have knowledge about the typical salaries offered by the company. By asking this question, they're often trying to see whether the applicant did research about the company. So learn about the company before the interview! You can use websites like Payscale or Glassdoor and read the reviews from other people who worked at this company! Can you work under pressure? This is a behavioral question, and the reason behind this question is the interviewers want to know if you get really stressed out. So the best way to answer this question is by talking about a situation where you experienced pressure, and the action that you took to diffuse that pressure. Then, talk about the result and what happened. How do you make your decisions? You might be asked this question if you are applying for management or lead position. They're interested in knowing your process when making decisions, because it's very likely that at some point, you will have to make a critical decision in the workplace. So, the best way to answer is to be confident and walk them through some of your management exercises, or some of your work situations that you handled successfully. What attracted you to this job? Here, the interviewers are typically trying to know if you understand the position you’re applying for, and that your goals and experience align with the role. Always remember that employers value candidates who aim to meaningfully contribute to company goals while also advancing their own careers. Where do you see yourself in five years? This is a growth-oriented question. So, if you just simply say: “I see myself sitting around here for the next five years until I figure out what I want to do”, that’s not what they want to hear. You should align this question to where the company is going and then you talk about how you see yourself fitting in their future. Why are you applying for this job? Here the interviewers want to know if you know their core values. A lot of people make mistakes answering this question and say that they are applying for the job because of the compensation package. Of course, salarie and benefits are an important thing, but you should have a long-term goal you want to achieve from the job! So it’s better to make sure this goal alligns with the company’s goals. That is what they want to hear from you. Why do you want to work here? The key to answering this question is to align yourself with where this company is going, so that’s why you must do some research on the company, like what are their values? What is their mission? Where are they going? What do they want to do? And by doing that, that will make you appear to be someone who can contribute to their overall mission, their projects, or whatever it is they’re trying to do. What makes you a good fit for this job? Here, they want you to talk about your past experiences, your past education, the kinds of things that you have done that are related to the kinds of things that they're looking for. So, you have to get a lot of information about the position, the job description, what they're looking for, and what the goals are for this position. Why should we hire you? I guarantee you are probably going to get asked this question, but it will most likely come near the end of the interview, after they’ve had a chance to build up some rapport and they’re actually thinking that you might be a good fit. Now, this is the chance to sell yourself, but you have to understand what they are looking for and the pains and problems that they have. Do you have any questions? This is usually the last question, and I made it the last one for a reason because this is most likely the last question they're going to ask you. Now that's your opportunity to find out more about what the next steps are, where they're going, or whatever is important for you. Don't just ask them questions to ask questions. Ask them questions that will help you determine whether this is a place that you want to be. Don't just ask questions about their organization chart or their finances or things that just don't really pertain to you. Ask them questions that are going to help you make a decision about whether you want to work there....

Nov 11, 2021

5 mins

General

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

Understanding Sourcemaps: From Development to Production

What Are Sourcemaps? Modern web development involves transforming your source code before deploying it. We minify JavaScript to reduce file sizes, bundle multiple files together, transpile TypeScript to JavaScript, and convert modern syntax into browser-compatible code. These optimizations are essential for performance, but they create a significant problem: the code running in production does not look like the original code you wrote. Here's a simple example. Your original code might look like this: ` After minification, it becomes something like this: ` Now imagine trying to debug an error in that minified code. Which line threw the exception? What was the value of variable d? This is where sourcemaps come in. A sourcemap is a JSON file that contains a mapping between your transformed code and your original source files. When you open browser DevTools, the browser reads these mappings and reconstructs your original code, allowing you to debug with variable names, comments, and proper formatting intact. How Sourcemaps Work When you build your application with tools like Webpack, Vite, or Rollup, they can generate sourcemap files alongside your production bundles. A minified file references its sourcemap using a special comment at the end: ` The sourcemap file itself contains a JSON structure with several key fields: ` The mappings field uses an encoding format called VLQ (Variable Length Quantity) to map each position in the minified code back to its original location. The browser's DevTools use this information to show you the original code while you're debugging. Types of Sourcemaps Build tools support several variations of sourcemaps, each with different trade-offs: Inline sourcemaps: The entire mapping is embedded directly in your JavaScript file as a base64 encoded data URL. This increases file size significantly but simplifies deployment during development. ` External sourcemaps: A separate .map file that's referenced by the JavaScript bundle. This is the most common approach, as it keeps your production bundles lean since sourcemaps are only downloaded when DevTools is open. Hidden sourcemaps: External sourcemap files without any reference in the JavaScript bundle. These are useful when you want sourcemaps available for error tracking services like Sentry, but don't want to expose them to end users. Why Sourcemaps During development, sourcemaps are absolutely critical. They will help avoid having to guess where errors occur, making debugging much easier. Most modern build tools enable sourcemaps by default in development mode. Sourcemaps in Production Should you ship sourcemaps to production? It depends. While security by making your code more difficult to read is not real security, there's a legitimate argument that exposing your source code makes it easier for attackers to understand your application's internals. Sourcemaps can reveal internal API endpoints and routing logic, business logic, and algorithmic implementations, code comments that might contain developer notes or TODO items. Anyone with basic developer tools can reconstruct your entire codebase when sourcemaps are publicly accessible. While the Apple leak contained no credentials or secrets, it did expose their component architecture and implementation patterns. Additionally, code comments can inadvertently contain internal URLs, developer names, or company-specific information that could potentially be exploited by attackers. But that’s not all of it. On the other hand, services like Sentry can provide much more actionable error reports when they have access to sourcemaps. So you can understand exactly where errors happened. If a customer reports an issue, being able to see the actual error with proper context makes diagnosis significantly faster. If your security depends on keeping your frontend code secret, you have bigger problems. Any determined attacker can reverse engineer minified JavaScript. It just takes more time. Sourcemaps are only downloaded when DevTools is open, so shipping them to production doesn't affect load times or performance for end users. How to manage sourcemaps in production You don't have to choose between no sourcemaps and publicly accessible ones. For example, you can restrict access to sourcemaps with server configuration. You can make .map accessible from specific IP addresses. Additionally, tools like Sentry allow you to upload sourcemaps during your build process without making them publicly accessible. Then configure your build to generate sourcemaps without the reference comment, or use hidden sourcemaps. Sentry gets the mapping information it needs, but end users can't access the files. Learning from Apple's Incident Apple's sourcemap incident is a valuable reminder that even the largest tech companies can make deployment oversights. But it also highlights something important: the presence of sourcemaps wasn't actually a security vulnerability. This can be achieved by following good security practices. Never include sensitive data in client code. Developers got an interesting look at how Apple structures its Svelte codebase. The lesson is that you must be intentional about your deployment configuration. If you're going to include sourcemaps in production, make that decision deliberately after considering the trade-offs. And if you decide against using public sourcemaps, verify that your build process actually removes them. In this case, the public repo was quickly removed after Apple filed a DMCA takedown. (https://github.com/github/dmca/blob/master/2025/11/2025-11-05-apple.md) Making the Right Choice So what should you do with sourcemaps in your projects? For development: Always enable them. Use fast options, such as eval-source-map in Webpack or the default configuration in Vite. The debugging benefits far outweigh any downsides. For production: Consider your specific situation. But most importantly, make sure your sourcemaps don't accidentally expose secrets. Review your build output, check for hardcoded credentials, and ensure sensitive configurations stay on the backend where they belong. Conclusion Sourcemaps are powerful development tools that bridge the gap between the optimized code your users download and the readable code you write. They're essential for debugging and make error tracking more effective. The question of whether to include them in production doesn't have a unique answer. Whatever you decide, make it a deliberate choice. Review your build configuration. Verify that sourcemaps are handled the way you expect. And remember that proper frontend security doesn't come from hiding your code. Useful Resources * Source map specification - https://tc39.es/ecma426/ * What are sourcemaps - https://web.dev/articles/source-maps * VLQ implementation - https://github.com/Rich-Harris/vlq * Sentry sourcemaps - https://docs.sentry.io/platforms/javascript/sourcemaps/ * Apple DMCA takedown - https://github.com/github/dmca/blob/master/2025/11/2025-11-05-apple.md...

Nov 21, 2025

5 mins

JavaScript

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.