Driving Action and Communication in AWS Amplify Open Source Projects

AWS Amplify is a complete solution that lets frontend web and mobile developers easily build, ship, and host full-stack applications on AWS, with the flexibility to leverage additional AWS services as use cases evolve. To build Amplify applications, customers typically use one of the open source Amplify libraries. At Amplify, we manage and build these open source projects on GitHub.

In the last year, the number of contributions across the Amplify projects has increased and the teams have scaled to meet customer needs while building across programming languages and frameworks. This necessitates a constant balance of collaboration with contributors and also flexible processes to continually move the projects forward. The goal is to provide a delightful experience for Front End developers building on AWS.

Open source is as much about relationships as it is about code. These relationships are being built anytime the team is collaborating with external contributors, developers, and customers at different touch points. A core element to facilitate open source is to facilitate relationships through consistent and transparent communication. There isn’t a clear, well-defined playbook for this. It requires iteration and continuous feedback from contributors to fine tune and make better. How we communicate can mean how the projects are planned, structured, and received by the developer community! And all of this may change over time!

In this post, we’ll cover some processes and tools that we’ve built and use at AWS Amplify to help build a vibrant and responsive open source community.

Organization

For context, an average of 35 external contributor pull requests (PRs) and 350 issues are opened each month on GitHub across the Amplify project repositories. In 2022, this equated to an 80% increase in issues and 66% increase in external contributor PRs from the previous year. An external contributor is any active contributor that is not a member of the Amplify GitHub organization. These projects range from the Amplify CLI to the client libraries like Amplify JS and Amplify UI. We also have a very active Discord server with over 19,000 members.

Along with the growth, it can be a cultural shift for both AWS engineers and customers to work in the open. Not every team member is used to working in public, and not all customers are used to working with AWS through GitHub or Discord.

Our ownership model is that each individual team manages their own repositories and is responsible for the project health and operations. This includes issue and Pull Request (PR) management, communication, and releases. This level of autonomy helps the projects move fast and remain flexible. As the service has grown, so has the need for standardization and operational tooling within each team.

Communication and transparency – reducing the time to response

The starting point for community is consistent communication and transparency. There are different elements to this and it fluctuates over time and as projects grow or slow in velocity. There is an expectation in open source software development that there is an ongoing dialog with the community. This may take the form of contributors helping on issue triage and workarounds, providing feedback on Request for Comments (RFCs), and submitting PRs. It could also be developers using the libraries and services within their applications.

In each of these scenarios, open communication is what helps to oil that machine. In open source, the goal is to determine an action for each issue, pull request, feature request, or question that is created. In most cases, proactive communication and quick responses in issues and PRs helps to determine this action faster. This also shapes the open source contributor experience. An external contributor is more likely to stay engaged in an issue thread or PR review if the maintainers are quick to respond.

Knowing this, we identified ways to reduce friction and make the experience better knowing that communication plays such a large role. These ways are:

Standardize the structure of the operational processes (GitHub issues labels, etc.)
Communicate as early and often as possible in response to open items (issues, PRs, etc.)
Proactively track updates on these items in order to follow up quickly

With these goals in mind, we had to operationalize processes to allow us to deliver on each. Thinking through this, two core themes surfaced:

Develop a consistent approach and cadence for communication
Reduce overall time-to-response (or action)

Tackling these first would improve the contributor experience and begin to strengthen our own internal culture. Once standardized, we could then proactively track open items and metrics.

Communications processes

How do we improve communication across our project? This is where that cultural shift comes in. Sometimes this requires changes to normal process and team communication to fully embrace working in the open. The project is always evolving and updating, including nights and weekends. Without a clear process to drive action, things can quickly begin to get missed.

The first task was to find the root cause of the communication friction points in a project repository. What are the communication touch points? At those points, where can automation help reduce friction and time to next action? The initial entry points to communication in a GitHub repository are:

A contributor is using the project and opens an item in the form of an issue, or
A contributor opens a PR to submit code for inclusion into the project

The team on-call engineers were initially shadowed to observe how they identified, and interacted with, new and updated issues and PRs. A common theme was that the context switching and frequent back and forth on these items was very time consuming and hard to track. After observing this same pattern across multiple projects, it was clear that the conversation should be streamlined.

We needed an efficient way to both remind the original posters of what is needed to help reproduce an issue and encourage them to also provide details. For each of these items, we had to determine the best way to expedite the path to action. Maintainers need to triage an issue to determine the next action to take. Maintainers also need to triage each pull request to determine if it aligns with the project and identify what the next steps are with respect to review and merge.

GitHub issue template forms to the rescue

We initially standardized the GitHub issue template forms across all of the Amplify projects after getting access to the Beta feature in early 2021. These forms are used each time a contributor opens an issue, pull request, or feature request in a repository. This allowed for more actionable conversations by collecting all of the required information up front. The goal of the form was to collect just the required information without introducing unnecessary friction for contributors. This is different from the original GitHub issue templates that allowed for more free-form data entry. With this approach, we were able to require standard information that had been found to be helpful in triaging issues while shadowing the maintainers. Here is a screenshot of a portion of the current GitHub issue form template in the Amplify CLI repository.

This is the form that is used to open new issues in the repository. It asks the user to check some boxes before opening an issue, such as whether they have installed the latest version of the Amplify CLI, searched for duplicate or closed issues, and read the guide for submitting bug reports. It also asks some open ended questions about the user’s environment.

As using the new form to file an issue became the standard, the starting point for communication became clearer, allowing future interactions on issues and PRs to be more direct. Through the structured nature and standardized collection of data fields, we were able to significantly improve the quality of our search results. This has helped to reduce duplicate issues (although they may still exist in some forms in older issues) and increase visibility and traction on current open issues and feature requests.

Standardization

As the Amplify project quickly grew, the operational processes needed to grow with it and remain consistent across teams. Repository standardization tools are typically templates used to structure a project when it is first created. The original templates are helpful but there is an ongoing challenge of maintaining, or changing, the structure over time as these dimensions change. To account for this, we created an open source repository audit tool that provides a declarative approach to keep certain items such as labels, project topic tags, and descriptions up to date.

The audit tool also includes a dashboard to provide insight into other items, such as GitHub actions, required links, and the number of good first issues. The required items are defined in a configuration file and each repository is checked against that structure. This is a simple but effective way to quickly check across all the projects without manually checking each project.

Repositories will change over time but we need to make sure that there is consistency in the core structure. For instance, new labels are added, some are removed. Or, the CODEOWNERs.md file needs updated. The audit tool queries the repository metadata and provides a self-service way for each team to check if the repo is in good standing as part of their standard operating processes or has fallen out of date and needs attention. This screenshot shows a portion of the audit tool for the Amplify JS repository. The green check mark next to the links indicates that these items are present in the repository.

We want customers to have a consistent entry point when landing in any AWS Amplify repository. This includes the same nomenclature and core labels to correctly communicate the lifecycle of issues and PRs. This screenshot shows the required labels section of the tool. The set of required labels is compared against the labels in the repository for any discrepancies.

Data and tooling – separating out external contributor events

To accurately gauge activities on issues and opened items, it was critical to determine whether events were initiated by someone on the Amplify team or an external contributor in order prioritize communication and the triaging process. Our triaging process involves troubleshooting or reproducing an issue by a project maintainer. We needed to isolate GitHub issue (and pull request) event data created by external contributors in a separate tool to support this effort.

To track this event stream from GitHub, we built serverless data processes using AWS Lambda to capture issues and PRs that have been updated, and then capture any new events (comments, labels, etc.) on the issues. The data allows for ad-hoc querying against events to isolate if activity is increasing in a certain area. This also helps teams to quickly spot items when there are lags in timezones or as team on-call rotations change. All of these queries take into account the active members of the Amplify organization to identify those events only triggered by external contributors.

Capturing this data has allowed us to build tools to proactively engage in open and closed issues. The following sections outline these tools.

Trending issues

With the external contributor data separated from Amplify team events, we are able to start tracking, in near real-time, issues that have an increased amount of activity within a given time period. One way has been to create a dashboard that highlights trending issues that are receiving increased activity from external contributors. This is used at the individual project level and also across all of the projects. This helps to identify cross-project themes that may be starting without constant, manual, checking of issues to see what has changed.

The trending dashboard only ranks issues based on the activity that they are receiving from external contributors within a given time period. It takes into account recent comments and the aggregate reactions on comments that are not created by Amplify maintainers. This provides a holistic view to the themes that contributors and developers may be experiencing across the entirety of Amplify without the noise of Amplify team comments.

This includes issues, both open and closed post triage when there’s already been communication. It’s important to track closed issues (that are not locked) to not miss any new comments or activity. Since the issue is closed, those comments may not be seen unless a team member happens to view the issue. This screenshot shows the trending list of open issues in the Amplify CLI repository. The list of issues and aggregated metadata (number of comments and reactions) only includes data from external contributors.

Closed issues with increased activity

As previously mentioned, closed issue visibility is a challenge since it’s difficult to track which closed issues were updated and their specific changes – new comment, increase in number of reactions. The trending dashboard also tracks this activity.

The dashboard is especially useful for issues that are already closed that may continue to receive events. Without automation, it’s very time consuming (and manual) to identify an increased spike in reactions or external contributor comments on issues across one project, let alone over 20. Often times in projects, these comments go unnoticed unless an Amplify team member is tagged or subscribed to a specific item and happens to see the notification.

Having a UI that highlights these items also helps to reduce notification fatigue. The Amplify team (engineers, product, and developer experience) receive many notifications across items for many of the Amplify repositories. It is helpful to have a single dashboard to spot check if activity has increased on an older, closed issue.

Metrics to track

So how do we know that all of these processes and tools are making a positive impact? A few key metrics helped:

Mean Time to Respond (MTTR) – This measures how responsive we are to customers and encourages communicating as soon as possible once an issue or Pull Request is opened.

Mean Time to Close (MTTC) – This measures the overall timeframe that it takes to close an issue or Pull Request.

The definition of these metrics used with the constant stream of event data has allowed us to track the MTTC and MTTR of items at the repository and organization level.

MTTR is primarily about response times. How quickly do we respond back throughout the lifecycle of an issue (or PR)? A lower MTTC indicates that issues are closed faster. This may mean a few things: Maintainers have answered questions, reproduced issues, and actioned PRs. There are a lot of factors that contribute to an item being closed, which may have varying timelines. One example is feature requests that may remain open longer than a normal issue. There are caveats to each metric, but this helps to isolate issues that need further investigation.

Even with the progress in tracking, a few consistent challenges presented themselves. The back and forth communication on issues can be very sporadic. The next step was to isolate which issues and PRs needed a response.

Pending response

It’s difficult and time consuming to keep track of comment responses in issues and PRs utilizing only the notifications view within GitHub. One mechanism to keep track of this is identifying items that were awaiting a response and the original poster has now followed up (i.e. responded).

The ideal flow is something like this:

Issue is opened
Team responds with follow up or questions
Issue is labeled pending-response

A dashboard displays issues that have the pending-response labels AND an external contributor has responded

This helps reduce active response times and highlights when issues have received a reply. Additionally, this ensures that issues are actioned and don’t remain in an unknown state (i.e. not triaged) while awaiting a reply. Similar to the trending issues above, the team created a dashboard to surface any issue that fit this criteria. This screenshot shows the list of issues that need a response from the maintainers. These issues all have the pending-response label and an external contributor has been the most recent to comment.

Conclusion

Open source is not static. Tools, teams, and community are always evolving and what is working today will certainly change over the next year. Working backwards from consistency and communication has allowed Amplify to focus attention on prioritizing proactive action to make it a pleasant experience for community members to contribute to the projects.

We continue to identify more efficient ways to strengthen the developer relationships and facilitate more open communication across the Amplify repositories. As the community and project evolve, it’s important to remain flexible, communicate early and often, and continue to improve what the team can control.

Interested in learning more about open source at AWS Amplify? Follow @AWSAmplify on Twitter to get the latest updates about the Amplify Contributor Program, explore the open source Amplify GitHub repositories, or join the Amplify Discord server.

Flatlogic Admin Templates banner

Generate Full-Stack Web Apps Based on Database Schema

Hello! Flatlogic has added one more important feature: ready-made web application scheme integration. Check out our release notes to learn more about our latest product enhancements.

Previously, Flatlogic web app generator allowed you to model a database schema from scratch. We received a lot of requests from our users who had already modelled DB schemas and found it inconvenient to manually remodel the schema in Flatlogic schema editor.

To eliminate this obstacle and increase our users’ satisfaction, we are introducing a new platform feature: Creating the web app schema from a SQL dump. The feature supports both Postgres and MySQL dialects and identifies tables and column types, also trying to discover relations based on index, reference and constraint information. “users” table is automatically added to the DB model to preserve web app user management functionality. If the “users” table already exists in the imported DB, the column lists of the two tables are merged. SQL import is invoked by simply uploading the SQL dump file, literally in one click.

We recommend that you choose “Structure only, no data” mode when dumping the SQL from your database, otherwise the data dump will result in unnecessary volume uploads which sometimes could be huge and even lead to upload failure.

After the successful file upload and schema import, the schema editor allows you to review and edit the schema, and correct names and column types in case those were not identified correctly by the SQL dump parser. Also you can add one-to-many (relation one) and many-to-many (relation many) relation types if such were not discovered automatically.

Flatlogic schema editor also allows you to extend your existing DB schema while keeping all the data intact by applying our generated migrations feature.

Enjoy this new feature and model Admin web apps for your existing database literally in one click!

Click here to learn more about upcoming features. Here you’ll see some info about Flatlogic plans and some points from the roadmap.

The post Generate Full-Stack Web Apps Based on Database Schema appeared first on Flatlogic Blog.Flatlogic Admin Templates banner

React vs Vue: What to Choose in 2022?

React and Vue are the two most popular and widely used JavaScript frontend frameworks today. These frameworks allow developers to create a wide variety of web applications with JavaScript. Choosing between the two can be confusing if you are building a new application. Each has its own use case and serves different business needs. 

Most web developers prefer to use Vue.js and React frameworks. Using React or Vue.js provides a quality approach to web development that is consistent and performant. Both Vue and React have their own best scripts and meet different kinds of business needs.

In this article, we will learn about each and explore which is best suited for your business.

What is React?

React.js combines a high degree of concentration with simplicity when it comes to user experience. It was developed by Facebook as an open-source JavaScript library to help developers build user interfaces. React follows a declarative programming style and a component-based approach. It allows for the creation of complex web applications with the highest flexibility and speed. 

React.js is the most used web framework in 2021 with 40.14% of the software developers globally using React. 

React holds the top spot for the fourth year. Popular companies that are currently using React.js are AirBnB, Netflix, Instagram, and Udemy.

Source: https://2021.stateofjs.com/en-US/libraries/front-end-frameworks

What is Vue.js?

Vue.js is a progressive JavaScript framework that developers use to build interfaces. Unlike the Angular framework, Vue is incrementally adaptable by design. It scales easily between a library and a fully-featured framework. Companies using Vue.js include GitLab, Behance, Upwork, and Grammarly.

Here are a few Vue.js statistics

Vue.js is used by 0.8% of all the websites amongst JavaScript libraries.
Vue.js is used by 1.2% of all the websites amongst the JavaScript library we know and that rank in the top 1,000,000.
In 2021, 42% of the developers admitted that they used Vue in their company. 55% of the developers are of the view that Vue will get more popular in their organization. 

What are the Similarities between React and Vue?

Before looking at the differences between the two, let us look at some similarities. Both React and Vue possess component-based architecture. Also, both the frameworks are lightweight and have an exposure to lifecycle methods. Their performance is fairly similar. Both technologies work with any existing web application, even if it’s not a Single Page Application.

Below are some similarities:

They have composable and reactive view components
They use virtual DOM
JavaScript Code and PWA support
They concentrate on a core library. They also involve handling of routing and global state management with companion libraries
Possibility of working with any existing web applications
Both React and Vue have large proactive communities and plenty of libraries and tools available.

Comparison between React and Vue

You can pick one after knowing how they differ. The most obvious distinction: React is a library, whereas Vue is a framework.

Let us compare them taking into account some essential parameters. 

Data Binding 

Vue uses two-way data binding. It means whenever you change any interface element, your model state automatically changes with it. It may look simple to read about it. However, for a large project, it is not. If you want a good data overview and want easy debugging, you may prefer React as it has one-way data binding. After the model state is updated, React then renders the change in the interface element.

Desktop and Mobile Development 

React Native is the perfect platform for you if you want to build mobile apps that work on Android or iOS. Developers can use their existing skills to get started. The biggest advantage of using React is that you can reuse 99% of code between Android and iOS.

On the other hand, Vue does not have a dedicated platform like React Native. However, it does not mean you cannot develop native applications. Vue developers can use a cross-platform UI framework or plugins and write Vue applications and compile them into native apps – iOS and Android.

Major Differentiator – Syntax

One of the major differences between them is the way the view layer is built. Vue uses HTML templates by default, and there is no option to write in JavaScript Expressions (JSX). On the other hand, React solely uses JSX. Vue is easier to use even for beginner frontend developers as it uses only HTML. React’s JavaScript Expressions combine CSS and HTML into JavaScript. The XML-like syntax allows developers to create self-contained UI components with view-rendering instructions included.

Tooling

React provides third-party tools to help developers create React apps, and it allows them to speed up app development by adding scripts. Earlier, React developers had to copy the files from previous apps and configure everything from zero. It was not only time-consuming but a boring task that no developer liked doing. 

Vue, on the other hand, uses a tool called Vue CLI. It enables the user to create any project quickly. It comes with many benefits like easy improvements, adding plugins anytime during the project, etc.

Popularity

It is not easy to pick a winner on popularity, but if you check online communities, React wins this battle. It is mainly because it is backed by Facebook. The Vue community is smaller compared to React with fewer packages and resources. However, it is maintained by the creator himself – Evan You and his team.

Template and Styling

The UI library is incomplete without templates and styles. Additionally, they’re the places where the difference between React and Vue is most apparent, since the code design is different. The approaches both Vue and React take are also quite different.

While Vue has a more declarative approach, React is more functional. Since the logic and markup are both considered as one, they are mixed. It is accomplished with JSX, which is an abstraction of React.createElement, which is used to create Virtual DOM entities. 

Templates and styles are treated separately with Vue – a more conservative approach. Here, the templates are viewed as old-fashioned HTML elements.

Performance

If you want to make the decision of choosing anyone between Vue and React based on performance, you will not be able to since both frameworks have remarkable speed. However, as mentioned at the start, you can check for specific use cases to decide which is a better option for you.

Learn more about Vue.js Best Use Cases 

Vue has to be integrated into an existing project incrementally. This means there is a per project requirement since it is a progressive framework. For example, you can use Vue.js as a lightweight library to add some interactivity to a web app. Ease of integration is one of Vue’s top assets. 

You can hire Vue js developer to easily implement Vue.js into a project – it is a lot faster. The learning curve is easy, and tools like Vue UI and CLI make it a great tool to use for quick MVP delivery and start-up ideas. It is a cost-effective solution for all small to medium applications. However, it does not mean it is not good for large web apps. It has a vast ecosystem of tools and companion libraries, allowing the framework to respond to the complex needs of enterprise-grade applications.

Learn more about React.js Best Use Cases 

React was initially created for large-scale web projects, and hence using it for a small and simple app would not justify its usage. Setting up a project using React.js is not easy, and you need some level of expertise to do it, but its architecture ultimately pays off in the long run.

JSX is powerful, and it gives developers a range of powers – flow controls and advanced IDE features such as auto-completion or listing are included in the component view templates. React does not have official packages for routing or state management like Vue. If you are developing complex apps, you have to use third-party solutions in many places. It gives a range of choices to developers. If you have experienced developers, they will know better which libraries are optimum and can be used to meet the business demands of a particular web application.

Choose a framework/library according to your needs

React is a library, and hence the users gain more control, such as the manual re-rendering control. The library heavily utilizes functional programming principles, which is evident in how it handles state and communicates between components. On the contrary, Vue is a framework that brings to the table many more built-in features and companion libraries which come from the core team. Hence, this helps in making the development experience smoother for the user.

Both Vue and React are great tools for building interactive user interfaces. You cannot pick one randomly, you will need to take into account many factors like your business needs, developers’ experience, budget, timeframe to deliver the project, and much more. Performance-wise both are at par, and you won’t be disappointed in this aspect whether you choose React or Vue.

Suggested Articles

Vue vs React: What is Easier? What is Trending? [Detailed Guide with +/-]
What is Vue?
12 Best React Admin Templates Under $100

The post React vs Vue: What to Choose in 2022? appeared first on Flatlogic Blog.Flatlogic Admin Templates banner