Skip to content
Rob Ocel

AUTHOR

Rob Ocel

Software Architect and Engineering Lead

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

Select...
Select...
This Dot Labs Engineering Levels cover image

This Dot Labs Engineering Levels

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....

Why You Should Consider Migrating From AngularJS to Vue cover image

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....