Announcing General Availability of Amazon CodeCatalyst

We are pleased to announce that Amazon CodeCatalyst is now generally available. CodeCatalyst is a unified software development service that brings together everything teams need to get started planning, coding, building, testing, and deploying applications on AWS. CodeCatalyst was designed to make it easier for developers to spend more time developing application features and less time setting up project tools, creating and managing continuous integration and continuous delivery (CI/CD) pipelines, provisioning and configuring various development and deployment environments, and onboarding project collaborators. You can learn more and get started building in minutes on the AWS Free Tier at the CodeCatalyst website.

Launched in preview at AWS re:Invent in December 2022, CodeCatalyst provides an easy way for professional developers to build and deploy applications on AWS. We built CodeCatalyst based on feedback we received from customers looking for a more streamlined way to build using DevOps best practices. They want a complete software development service that lets them start new projects more quickly and gives them confidence that it will continue delivering a great long term experience throughout their application’s lifecycle.

Do more of what you love, and less of what you don’t

Starting a new project is an exciting time of imagining the possibilities: what can you build and how can you enable your end users to do something that wasn’t possible before? However, the joy of creating something new can also come with anxiety about all of the decisions to be made about tooling and integrations. Once your project is in production, managing tools and wrangling project collaborators can take your focus away from being creative and doing your best work. If you are spending too much time keeping brittle pipelines running and your teammates are constantly struggling with tooling, the day to day experience of building new features can start to feel less than joyful.

That is where CodeCatalyst comes in. It isn’t just about developer productivity – it is about helping developers and teams spend more time using the tools they are most comfortable with. Teams deliver better, more impactful outcomes to customers when they have more freedom to focus on their highest-value work and have to concern themselves less with activities that feel like roadblocks. Everything we do stems from that premise, and today’s launch marks a major milestone in helping to enable developers to have a better DevOps experience on AWS.

How CodeCatalyst delivers a great experience

There are four foundational elements of CodeCatalyst that are designed to help minimize distraction and maximize joy in the software development process: blueprints for quick project creation, actions-based CI/CD automation for managing day-to-day software lifecycle tasks, remote Dev Environments for a consistent build experience, and project and issue management for a more streamlined team collaboration.

Blueprints get you started quickly. CodeCatalyst blueprints set up an application code repository (complete with a working sample app), define cloud infrastructure, and run pre-configured CI/CD workflows for your project. Blueprints bring together the elements that are necessary both to begin a new project and deploy it into production. Blueprints can help to significantly reduce the time it takes to set up a new project. They are built by AWS for many use cases, and you can configure them with the programming languages and frameworks that you need both for your application and the underlying infrastructure-as-code. When it comes to incorporating existing tools like Jira or GitHub, CodeCatalyst has extensions that you can use to integrate them into your projects from the beginning without a lot of extra effort. Learn more about blueprints.

“CodeCatalyst helps us spend more time refining our customers’ build, test, and deploy workflows instead of implementing the underlying toolchains,” said Sean Bratcher, CEO of Buildstr. “The tight integration with AWS CDK means that definitions for infrastructure, environments, and configs live alongside the applications themselves as first-class code. This helps reduce friction when integrating with customers’ broader deployment approach.”

Actions-based CI/CD workflows take the pain out of pipeline management. CI/CD workflows in CodeCatalyst run on flexible, managed infrastructure. When you create a project with a blueprint, it comes with a complete CI/CD pipeline composed of actions from the included actions library. You can modify these pipelines with an action from the library or you can use any GitHub Action directly in the project to edit existing pipelines or build new ones from scratch. CodeCatalyst makes composing these actions into pipelines easier: you can switch back and forth between a text-based editor for declaring which actions you want to use through YAML and a visual drag-and-drop pipeline editor. Updating CI/CD workflows with new capabilities is a matter of incorporating new actions. Having CodeCatalyst create pipelines for you, based on your intent, means that you get the benefits of CI/CD automation without the ongoing pain of maintaining disparate tools.

“We needed a streamlined way within AWS to rapidly iterate development of our Reading Partners Connects e-learning platform while maintaining the highest possible quality standards,” said Yaseer Khanani, Senior Product Manager at Reading Partners. “CodeCatalyst’s built-in CI/CD workflows make it easy to efficiently deploy code and conduct testing across a distributed team.”

Automated dev environments make consistency achievable A big friction point for developers collaborating on a software project is getting everyone on the same set of dependencies and settings in their local machines, and ensuring that all other environments from test to staging to production are also consistent. To help address this, CodeCatalyst has Dev Environments that are hosted in the cloud. Dev Environments are defined using the devfile standard, ensuring that everyone working on a project gets a consistent and repeatable experience. Dev Environments connect to popular IDEs like AWS Cloud9, VS Code, and multiple JetBrains IDEs, giving you a local IDE feel while running in the cloud.

“Working closely with customers in the software developer education space, we value the reproducible and pre-configured environments Amazon CodeCatalyst provides for improving learning outcomes for new developers. CodeCatalyst allows you to personalize student experiences while providing facilitators with control over the entire experience.” said Tia Dubuisson, President of Belle Fleur Technologies.

Issue management and simplified team onboarding streamline collaboration. CodeCatalyst is designed to help provide the benefits of building in a unified software development service by making it easier to onboard and collaborate with teammates. It starts with the process of inviting new collaborators: you can invite people to work together on your project with their email address, bypassing the need for everyone to have an individual AWS account. Once they have access, collaborators can see the history and context of the project and can start contributing by creating a Dev Environment.

CodeCatalyst also has built-in issue management that is tied to your code repo, so that you can assign tasks such as code reviews and pull requests to teammates and help track progress using agile methodologies right in the service. As with the rest of CodeCatalyst, collaboration comes without the distraction of managing separate services with separate logins and disparate commercial agreements. Once you give a new teammate access, they can quickly start contributing.

New to CodeCatalyst since the Preview launch

Along with the announcement of general availability, we are excited to share a few new CodeCatalyst features. First, you can now create a new project from an existing GitHub repository. In addition, CodeCatalyst Dev Environments now support GitHub repositories allowing you to work on code stored in GitHub.

Second, CodeCatalyst Dev Environments now support Amazon CodeWhisperer. CodeWhisperer is an artificial intelligence (AI) coding companion that generates real-time code suggestions in your integrated development environment (IDE) to help you more quickly build software. CodeWhisperer is currently supported in CodeCatalyst Dev Environments using AWS Cloud 9 or Visual Studio Code.

Third, Amazon CodeCatalyst recently added support to run workflow actions using on-demand or pre-provisioned compute powered by AWS Graviton processors. AWS Graviton Processors are designed by AWS to deliver the best price performance for your cloud workloads running in Amazon Elastic Compute Cloud (Amazon EC2). Customers can use workflow actions running on AWS Graviton processors to build applications that target Arm architecture, create multi-architecture containers, and modernize legacy applications to help customers reduce costs.

Finally, the library of CodeCatalyst blueprints is continuously growing. The CodeCatalyst preview release included blueprints for common workloads like single-page web applications, serverless applications, and many others. In addition, we have recently added blueprints for Static Websites with Hugo and Jekyll, as well as Intelligent Document Processing workflows.

Learn more about CodeCatalyst at Developer Innovation Day

Next Wednesday, April 26th, we are hosting Developer Innovation Day, a free 7-hour virtual event that is all about helping developers and teams learn to be productive, and collaborate, from discovery to delivery to running software and building applications. Developers can discover how the breadth and depth of AWS tools and the right practices can unlock your team’s ability to find success and take opportunities from ideas to impact.

CodeCatalyst plays a big part in Developer Innovation Day, with five sessions designed to help you see real examples of how you can spend more time doing the work you love best! Get an overview of the service, see how to deploy a working static website in minutes, collaborating effectively with teammates, and more.

Try CodeCatalyst

Ready to try CodeCatalyst? You can get started on the AWS Free Tier today and quickly deploy a blueprint with working sample code. If you would like to learn more, you can read through a collection of DevOps blogs about CodeCatalyst or read the documentation. We can’t wait to see how you innovate with CodeCatalyst!

Behind the Scenes on AWS Contributions to Cloud Native Open Source Projects

Amazon Elastic Kubernetes Service (Amazon EKS) is well known in the Kubernetes community. But few realize that AWS engineers are closely involved and contributing upstream to Kubernetes and to many more cloud native open source projects.

In the past year alone, AWS contributed significantly to containerd, Cortex, etcd, Fluentd, nerdctl, Notary, OpenTelemetry, Thanos, and Tinkerbell. We employ maintainers and contributors on these projects and we will contribute more to these and other projects in the coming year. Here’s a behind-the-scenes look at our contributions and why we’re investing in the open source projects we support. You can also meet many of our contributors in the AWS booth at KubeCon Europe in Amsterdam, April 18-21, 2023 and hear from them in our virtual Container Day event 9 a.m. – 4 p.m. CEST on April 18.

“Amazon EKS is committed to open source and we are spending a lot of our cycles now focused on contributing back to the community. Kubernetes is part of a community that’s bigger than AWS and so we’re continuing to be committed to maintaining and helping that community to be successful because without it, we wouldn’t exist, either,” said Barry Cooks, Vice President, Kubernetes, at AWS and a Cloud Native Computing Foundation (CNCF) governing board member.

AWS contributes to Kubernetes and Etcd

Today, AWS is heavily involved in open source, cloud native projects. Consider, for example, some of our recent key contributions to Kubernetes and etcd, the underlying data store for Kubernetes.

“We’re building the AWS cloud provider, contributing to CAPI (cluster API), and serve as part of the security response committee. We helped implement gzip optimization which improves the performance of Kubernetes clients,” said Nathan Taber who leads the product team for Kubernetes at AWS, in a keynote at KubeCon North America 2022. “With etcd we’re bringing our operational learnings from running just so much etcd at scale, back into the community.”

The AWS cloud provider for Kubernetes is the open source interface between a Kubernetes cluster and AWS service APIs. This project allows a Kubernetes cluster to provision, monitor, and remove AWS resources necessary for operation of the cluster.

As of Kubernetes 1.27, AWS has just finished a multi-year effort to migrate our legacy cloud provider out of tree to an external cloud provider. The cloud provider migration reduces binary bloat in the main kubernetes/kubernetes (k/k) repository, as well as reduces dependency complexity and the surface area for security vulnerabilities.

AWS has also built a webhook framework that allows cloud providers to host webhooks in their cloud-controller-managers, which makes certain migration tasks easier. One use case for this is helping other cloud providers to migrate the persistent volume labeller admission controllers from the API server code, which is one of the last areas of cloud provider specific code that needs to be migrated out of core Kubernetes.

“We’ve included a lot of space in our planning for upstream open source work this year,” said Nick Turner, software developer on the AWS Kubernetes team and a chair in Kubernetes SIG-cloud-provider. “Expect us to keep up our contributions to the cloud provider and the load balancer controller as well as increase our investments in the AWS IAM authenticator for Kubernetes and KMS encryption provider.”

These and other Kubernetes contributions bring value to the entire Kubernetes community as well as to the EKS service and its customers.

Since KubeCon Detroit last fall, the EKS-etcd team has contributed numerous improvements to etcd. Chao Chen contributed to the effort to improve testing mechanisms for etcd by unifying the test frameworks used by etcd tests. Baoming Wang contributed an important metric to the Kubernetes API server code base which will help catch data corruption issues early. We’ve also worked on building a linearizability test suite, made various improvements to the core etcd database and the etcd backend database Bolt-DB, contributed to documentation, made helm more resilient to etcd side transient errors, and fixed an issue with the installation script for argo-cd-helmfile.

What’s driving AWS to contribute more to cloud native open source

Like most modern companies, AWS builds many of its services with open source components. There are several business and technical reasons we do this, which we’ve outlined in an article on The New Stack about why we invest in sustainable open source. We recognize that the success of our services depends on the success of those underlying open source projects.

Given that most of the open source projects that AWS supports underpin specific services, AWS tasks all engineers working in services, regardless of their assigned sub-service teams, to contribute in any way that they can to those upstream projects.

The result is a virtuous cycle that promotes mutually beneficial growth. As AWS services grow, so too do the open source projects upon which they are based because of AWS contributions and support. Conversely, as these open source projects grow from the contributions of other companies and developers, so do the benefits to the AWS services that depend upon them.

AWS contributions focus on performance and scale

AWS contributions to open source typically come as a practical matter in the form of bug fixes, code reviews, documentation, new features, or security enhancements. Like many developers working in the open source space, AWS engineers often work to address issues that arise in the course of their day jobs and then share the fixes with the rest of the open source community. Similarly, new features for an open source project are developed by AWS engineers to expand the project’s scale or performance which in turn increases the project’s usability, stability, and overall appeal.

Because AWS has a large number of Kubernetes clusters under management, it affords AWS a unique opportunity to test the limitations of open source software and build its edges stronger and further out from its initial core. So many of the contributions that our team members do for upstream Kubernetes, etcd, containerd, and other projects center on making sure that we provide insights to the upstream community on where things break down in scaling, production, and operational readiness.

The resulting insights provide value for the entire open source community as well as our own customers.

Take for example, the lag fix that curiously performed as a latency expander. AWS engineer Shyam Jeedigunta, was looking at the logs and metrics collected from thousands of production EKS clusters. He determined that Gzip compression is enabled inside the Kubernetes API server to reduce the demand on network bandwidth and to decrease latency.  However, the compression was actually increasing the latency for large list requests made by clients to the Kubernetes API server. Shyam, who is also co-chair of the Kubernetes scalability special interest group (SIG), took a deep dive into the issue to investigate whether a particular compression level created the problem and if so, could the compression level be reduced? Could Gzip compression be disabled entirely? What impact would that have on latency and network bandwidth?

Answers to questions like this one lead to contributions upstream in etcd and core Kubernetes from AWS service teams. Customers and others often report these kinds of issues to the project as well, but the nature of the problem isn’t clear until it’s viewed on 1,000 nodes and 200,000 objects of a certain kind. AWS engineers diagnose what’s going on, put together troubleshooting information, and collate information into proposals on how to fix the problem(s) to upstream to Kubernetes. AWS likes to spearhead fixing issues that arise from running the projects at scale.

Key AWS contributions

AWS contributes to many Kubernetes sub projects and SIGs. For example, Micah Hausler and Sri Saran Balaji Vellore Rajakumar serve on the Kubernetes Security Response Committee (SRC), Davanum Srinivas (Dims) chairs SIG-Architecture and SIG-k8s-infra, and Nick Turner is a chair in SIG-cloud-provider.  Key contributions have gone into projects including containerd, Cortex, cdk8s, CNI, nerdctl and Prometheus. Innovations have also been substantial and include TorchServe, improved ARM support through AWS Graviton, and the Virtual GPU plugin. However, this is not an exhaustive or complete list of AWS contributions and innovations in the cloud native community.

On containerd, for example, AWS employs two maintainers who contribute features and help ensure the project’s general health and security. Key contributions from AWS engineers to the containerd project include OpenTelemetry integration in the 1.7.0 release, improved tracing, and improved fuzzing integration.

“It’s been awesome to see the growth on the container runtime team here at AWS these past few years. I love to see the eagerness to learn not just *how* to contribute, but how to do it well and really benefit the broader community,” said Phil Estes, a principal engineer at AWS and a containerd maintainer.

Nerdctl, a Docker-compatible CLI for containerd and a containerd sub-project, is used by other open source projects Lima, Finch, and Rancher Desktop. AWS engineers significantly improved nerdctl’s compose support by adding 11 out of 13 missing compose commands. We enhanced nerdctl’s image signing/verification support by contributing cosign support for nerdctl compose, and notation support for nerdctl. And engineer Jin Dong recently became the first reviewer for the project from AWS.

AWS services are also standardizing on OpenTelemetry, a set of open source tools and standards for collecting metrics, logs, and traces to measure application performance. AWS Distro for OpenTelemetry (ADOT), OpenSearch, and CloudWatch are all building on OpenTelemetry and contribute back to the upstream project. All ADOT code is 100% open source and contributed upstream. Key contributions include: adding functionality to upstream observability components such as OpenTelemetry language SDKs, collectors, and agents.

“Amazon is the fourth largest contributor to OpenTelemetry with a dedicated maintainer and many contributors working on the project. A key contribution has been improving collector and metric stability, including improved Prometheus interoperability with OpenTelemetry,” said Taber.

A fourth example is Cortex where AWS is the top supporter of the project and employs three maintainers. As AWS runs this project at scale, engineers have the opportunity to identify and fix scaling cliffs before they become a problem for the rest of the community. Some of the key contributions are new features and performance improvements. Examples include partition compactor, Ring DynamoDB Multikey KV, out of order samples ingestion, snappy-block gRPC compression, ARM images, and Thanos PromQL engine integration.

We have also contributed bug fixes to Thanos, a tool for setting up highly available Prometheus instances with long term storage. Thanos is a CNCF incubating project which Cortex depends on. We participated in the development of the new Thanos PromQL engine and open sourced a tool that could use fuzzing for correctness testing which has already caught a few bugs.

AWS employs four maintainers on Tinkerbell, a cloud native open source bare metal provisioning engine for EKS Anywhere and a CNCF Sandbox project. Key contributions include organizing the project roadmap, VLAN support, a Kubernetes native backend, out-of-band management Kubernetes controller, Helm Chart deployment, and Cluster API provider updates.

“Our team has done a lot of work to update the Tinkerbell backend from Postgres to native Kubernetes,” said Taber.

AWS employs three maintainers in Notation, a sub project of Notary under the CNCF, and is the third largest code contributor to Notary. Notation enables the generation of cryptographic signatures for container images so users can verify that they come from a trusted source or process. AWS founded the sub project with other contributors to come up with specifications for signature format, generation, verification, and revocation. As part of this work we also defined a process for evaluating signature envelope formats like COSE ensuring that they met a high security bar before they were used in Notation.

AWS employees have either written or reviewed the majority of code contributions for the core Notation libraries and a CLI. AWS also employs a maintainer to Ratify so Kubernetes users can easily enable policies for signature verification with their existing admissions controllers. Similarly we also employ a maintainer to ORAS so signatures can easily be pushed to OCI registries. Notation enables users to define granular trust policies for defining which sources they want to trust, balance deployment safety and security needs, and flexibility on secure signing key storage options.

We have contributed to many other open source projects as well, including Crossplane, for which AWS added support for EKS IRSA in the China region and fixed Amazon Route 53 wildcard support, and Backstage, with AWS Proton and AWS Code Suite (AWS CodeBuild, AWS CodePipeline, and AWS CodeDeploy).

“We’re very excited about doing more development in the open, sharing that with our customers, and working directly in some cases with customers on their needs in open source projects and working together to make the community stronger in the Kubernetes space,” Cooks said.

AWS is open

We want to hear from you. AWS engineers are open to helping community members through collaboration and contribution opportunities. Tell us how we can help meet your needs.

AWS engineers, solutions architects, and product managers are hanging out on the Kubernetes community and the CNCF community Slack channels. Channels where you can reach out to us include the provider AWS channel and Karpenter channel, and the AWS controllers for Kubernetes channel on the Kubernetes Slack.

Find us and tell us what you’d like us to work on. Or if you have a particular issue that you found in one of these upstream projects that you think our engineers can help move the needle on. Come find us and talk to us in the CNCF’s AWS Slack channel and join us for our virtual Container Day on April 18, before KubeCon EU.

Flatlogic Admin Templates banner

React Labs: What We’ve Been Working On – June 2022

React 18 was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’re exploring.

We typically have a number of projects being worked on at any time, ranging from the more experimental to the clearly defined. Looking ahead, we’d like to start regularly sharing more about what we’ve been working on with the community across these projects.

To set expectations, this is not a roadmap with clear timelines. Many of these projects are under active research and are difficult to put concrete ship dates on. They may possibly never even ship in their current iteration depending on what we learn. Instead, we want to share with you the problem spaces we’re actively thinking about, and what we’ve learned so far.

Server Components

We announced an experimental demo of React Server Components (RSC) in December 2020. Since then we’ve been finishing up its dependencies in React 18, and working on changes inspired by experimental feedback.

In particular, we’re abandoning the idea of having forked I/O libraries (eg react-fetch), and instead adopting an async/await model for better compatibility. This doesn’t technically block RSC’s release because you can also use routers for data fetching. Another change is that we’re also moving away from the file extension approach in favor of annotating boundaries.

We’re working together with Vercel and Shopify to unify bundler support for shared semantics in both Webpack and Vite. Before launch, we want to make sure that the semantics of RSCs are the same across the whole React ecosystem. This is the major blocker for reaching stable.

Asset Loading

Currently, assets like scripts, external styles, fonts, and images are typically preloaded and loaded using external systems. This can make it tricky to coordinate across new environments like streaming, server components, and more.
We’re looking at adding APIs to preload and load deduplicated external assets through React APIs that work in all React environments.

We’re also looking at having these support Suspense so you can have images, CSS, and fonts that block display until they’re loaded but don’t block streaming and concurrent rendering. This can help avoid “popcorning“ as the visuals pop and layout shifts.

Static Server Rendering Optimizations

Static Site Generation (SSG) and Incremental Static Regeneration (ISR) are great ways to get performance for cacheable pages, but we think we can add features to improve performance of dynamic Server Side Rendering (SSR) – especially when most but not all of the content is cacheable. We’re exploring ways to optimize server rendering utilizing compilation and static passes.

React Optimizing Compiler

We gave an early preview of React Forget at React Conf 2021. It’s a compiler that automatically generates the equivalent of useMemo and useCallback calls to minimize the cost of re-rendering, while retaining React’s programming model.

Recently, we finished a rewrite of the compiler to make it more reliable and capable. This new architecture allows us to analyze and memoize more complex patterns such as the use of local mutations, and opens up many new compile-time optimization opportunities beyond just being on par with memoization hooks.

We’re also working on a playground for exploring many aspects of the compiler. While the goal of the playground is to make development of the compiler easier, we think that it will make it easier to try it out and build intuition for what the compiler does. It reveals various insights into how it works under the hood, and live renders the compiler’s outputs as you type. This will be shipped together with the compiler when it’s released.

Offscreen

Today, if you want to hide and show a component, you have two options. One is to add or remove it from the tree completely. The problem with this approach is that the state of your UI is lost each time you unmount, including state stored in the DOM, like scroll position.

The other option is to keep the component mounted and toggle the appearance visually using CSS. This preserves the state of your UI, but it comes at a performance cost, because React must keep rendering the hidden component and all of its children whenever it receives new updates.

Offscreen introduces a third option: hide the UI visually, but deprioritize its content. The idea is similar in spirit to the content-visibility CSS property: when content is hidden, it doesn’t need to stay in sync with the rest of the UI. React can defer the rendering work until the rest of the app is idle, or until the content becomes visible again.

Offscreen is a low level capability that unlocks high level features. Similar to React’s other concurrent features like startTransition, in most cases you won’t interact with the Offscreen API directly, but instead via an opinionated framework to implement patterns like:

Instant transitions. Some routing frameworks already prefetch data to speed up subsequent navigations, like when hovering over a link. With Offscreen, they’ll also be able to prerender the next screen in the background.

Reusable state. Similarly, when navigating between routes or tabs, you can use Offscreen to preserve the state of the previous screen so you can switch back and pick up where you left off.

Virtualized list rendering. When displaying large lists of items, virtualized list frameworks will prerender more rows than are currently visible. You can use Offscreen to prerender the hidden rows at a lower priority than the visible items in the list.

Backgrounded content. We’re also exploring a related feature for deprioritizing content in the background without hiding it, like when displaying a modal overlay.

Transition Tracing

Currently, React has two profiling tools. The original Profiler shows an overview of all the commits in a profiling session. For each commit, it also shows all components that rendered and the amount of time it took for them to render. We also have a beta version of a Timeline Profiler introduced in React 18 that shows when components schedule updates and when React works on these updates. Both of these profilers help developers identify performance problems in their code.

We’ve realized that developers don’t find knowing about individual slow commits or components out of context that useful. It’s more useful to know about what actually causes the slow commits. And that developers want to be able to track specific interactions (eg a button click, an initial load, or a page navigation) to watch for performance regressions and to understand why an interaction was slow and how to fix it.

We previously tried to solve this issue by creating an Interaction Tracing API, but it had some fundamental design flaws that reduced the accuracy of tracking why an interaction was slow and sometimes resulted in interactions never ending. We ended up removing this API because of these issues.

We are working on a new version for the Interaction Tracing API (tentatively called Transition Tracing because it is initiated via startTransition) that solves these problems.

New React Docs

Last year, we announced the beta version of the new React documentation website. The new learning materials teach Hooks first and has new diagrams, illustrations, as well as many interactive examples and challenges. We took a break from that work to focus on the React 18 release, but now that React 18 is out, we’re actively working to finish and ship the new documentation.

We are currently writing a detailed section about effects, as we’ve heard that is one of the more challenging topics for both new and experienced React users. Synchronizing with Effects is the first published page in the series, and there are more to come in the following weeks. When we first started writing a detailed section about effects, we’ve realized that many common effect patterns can be simplified by adding a new primitive to React. We’ve shared some initial thoughts on that in the useEvent RFC. It is currently in early research, and we are still iterating on the idea. We appreciate the community’s comments on the RFC so far, as well as the feedback and contributions to the ongoing documentation rewrite. We’d specifically like to thank Harish Kumar for submitting and reviewing many improvements to the new website implementation.

Thanks to Sophie Alpert for reviewing this blog post!Flatlogic Admin Templates banner

How to Improve Developer Productivity? [Guide]

You work as a developer or software engineer and sometimes you feel tired, procrastinating and not satisfied with your effectiveness at work. It is a common thing for many developers because web-development is hard work that requires a lot of concentration and brain tension. 

In this article we are going to discuss 10 recommendations on how to make the development work more efficient and how to improve developer productivity!

But first, let’s clear up what productivity means?

What is Productivity? How Can it be Measured?

Productivity means that you get more work done with the same resources or during the same period of time. Different companies can use different tools and metrics to measure developer productivity. Usually it is based on how many lines of code, features, or tasks a developer could do. For example, you can use as metrics quantity of lines of code, code reviews, bugs fixed, number of commits, finished tasks, or number of deployments or releases. You should also keep in mind that measuring developer performance requires more transparency in products and processes. The way of measuring what your manager or company chooses can depend on objectives, business goals, size and structure of the company and so on. It can also be team or individual measuring. But anyway, the main idea is to improve these metrics by improving developer productivity.

How can we describe modern IT developers?

Also, before we start discussing recommendations on how to improve developer productivity, we would like to define the audience. 

Ten or fifteen years ago, when we discussed developers or software engineers, we would have imagined socially awkward, stereotypical geeks, similar to the main heroes from classic IT series and movies like Silicon Valley, The IT Crowd and so on.

But nowadays this stereotype is fading into reality. Now we can find absolutely different people working in web-development. We are going to propose common tools that can be useful for all types of personalities (and even not only for developers!).

The IT sphere is one of the fastest-growing industries in the world. The quantity of employees is significant. According to statista.com, the number of full-time employees increased from 52 million in 2019 to 65 million in 2022. And the demand for IT professionals is still growing! And the level of professionals and competition for a good offer are also high. So you should do your best to improve your skills and productivity at work. We are going to help you with this! So here goes!

https://www.statista.com/statistics/1126677/it-employment-worldwide/

Find below 10 tips on how to improve developer productivity:

1. Develop yourself first!

It may sound like a banal piece of advice, but it is absolutely effective and true. If you want to be a productive developer, you have to increase your base of professional knowledge, commercial experience and so-called hard skills. Deep knowledge of your stack, tools, libraries and so on will help you to find the right solutions faster and easier. 

But what is more important to all developers is their fundamental knowledge. You can go deeper into algorithms, systems architecture, or devopsing. And a good understanding of these things will definitely help you to feel more confident at any project you work on.

Stay a constant learner all your life to keep your brain working at the most productive level!

2. Create an optimal environment

The ideal developer workspace may look different for everyone, but the basic idea is to minimize distractions and make it comfortable for you.

Working on the beach with a laptop looks perfect only in pictures on social networks. In fact, an ergonomic workspace with a desk, a quality chair, and proper lightning is crucial for developers!

What is most important in your working environment is the right hardware! For all IT-specialists and especially for developers equipment plays a significant role in making their workspace convenient and their work productive.

Don’t forget about your online workspace. It is worth mentioning that there are also tools which are not software-related, but can help you much with planning, organizing and managing your performance, tasks and habits. Some of the most common project management and time tracking systems are Jira, Asana and Trello. There are also tools like F.lux to help reduce eye strain while looking at screens. There are plenty of other applications and tools to improve developer productivity and make your work more comfortable and efficient. Just if you feel like you need to improve something in your working environment at the office or your home office, be free to ask your manager and justify the importance or try to improve it yourself. Optimal workplace helps to improve developer productivity and performance as well!

3. Decrease the quantity of distractions 

If you ask developers what is the most annoying thing for them, most will answer that it is getting interrupted in the middle of a difficult working process. Because after being distracted, it is hard to catch that flow again. But distractions can be everywhere and affect everyone. So how can we avoid them?
One of the first and easiest ways is to turn off notifications in messengers and applications. You can read messages when you’re ready for a break. It will definitely save you hours of interruption for you. 

Use noise-canceling headphones and mute your phone.
Focus on one task at a time. Multitasking is not what developers should practice much, but sometimes it is an essential skill they need. But to switch effectively between tasks, you can plan ahead and split your work day into some sessions.
If your company uses apps like Slack, turn on the “Do not disturb” feature before starting your work session.

4. Communicate!

Regular communication among the team helps to share important information that’ll impact how effectively you get your work done. Some ways to provide more frequent communication include:

Slack channels
Daily standups
Team lunches
Project boards

It’s important to keep meetings and calls short and only include the people who need to be there. Speaking of Slack, it’s best practice to save group chat for communication that applies to all members, and use DMs for personal one-to-one discussions. 

Regular communication and feedback lead to more engaged customers and stronger customer relationships, but it can also help to improve developer productivity. Feedback gives a team proper information to help them decide what features and requests to work on and when. 

But don’t overdo it! ?

Communication is useful, but like many other good things, you can overdo it. Too much communication can negatively impact productivity and reduce working time and energy available to get the main tasks done. 

5. Set reasonable deadlines

To set deadlines that are reasonable for you, you first need to determine the scope of the project. Deadlines are great if they motivate a team and help them plan and prioritize tasks and plan for dependencies. But too much or too early, and they can become overwhelming, negatively impact concentration, and cause stress. When setting deadlines, you should provide a reasonable estimate of how long the task will take, and take into account unforeseen bugs and roadblocks, as well as other priorities that may arise.

If you are using project management software, be sure to monitor it regularly when you work on your tasks.

6. Implement healthy habits

This tip is 100% suitable for all, not just developers. 

Drink more water, pay attention to mental health, get enough sleep, eat healthy food, and ventilate the room to breathe more fresh air. Make sure your other muscles get some work to do and not only your brain! 

Healthy habits lead to a better level of energy and as a result they will help to improve developer productivity. Take care of yourself first!

7. Design before you implement

You should understand the task clearly because uncertainty will lead to procrastination and wasting of time. Your first goal should be to understand a task clearly and define the tools and strategy you will use.

It is a common beginners’ mistake to jump right into writing the code, without first mapping the nature of the problem and the logical paths for creating the solution.

The best way to follow this tip is to keep a notebook and a pen nearby. Draw maps, outlines, flows and schemes. Write down all the comments and ideas that come to your mind during the process. It will definitely help you not to lose the thread of your logic when you get distracted by something, for example.

8. Find your flow state

Just as a muse comes to writers or artists, so do developers who can catch the “wave” and be fully involved in the process and even do not notice how the time goes. It’s a magical feeling when your knowledge, motivation and concentration align to produce maximum performance. Try to feel this condition and use it to be productive to the maximum. 

It is necessary to learn more about yourself and analyze when you are the most productive and what you need to create this “magical flow”.

Due to this reason, remote work and flexible working hours are so important for most developers as you are more flexible and have the opportunity to work when you feel most productive.

Being productive doesn’t mean sitting at your desk from 9am till 5pm. These days many developers think about their work issues and work even when they commute, do sports, relax at home, or have important conversations with peers at a local cafe or a bar. Flexibility is one of the main advantages of remote work. Being flexible with when and where developers work allows them to work smarter, innovate and be more productive. But there are some threats to working remotely, and to prevent them you can follow the tips in our previous article in the blog about remote work.

9. Keep your code blocks clean and short

Nothing is worse than trying to figure out what you did some months ago and how it needs to be changed. When you have massive methods and classes, it can be very difficult to figure out what the original logic was. To implement this rule you can follow some effective principles.

The first principle is DRY. It means “Don’t Repeat Yourself” and was first mentioned in the book The Pragmatic Programmer: From Journeyman to Master by Andy Hunt and Dave Thomas. The second principle that we recommend to improve developer productivity is the attractive KISS principle. This abbreviation means “Keep it simple, stupid!

It’s important that your code can be understood by you and other developers, even when it has been written a long time ago. Optimize your code for readability and understandability.

There is a popular and demonstrative quote by Albert Einstein: “If you can’t explain it to a six year old, you don’t understand it well enough yourself.” Don’t forget it while doing your work as a developer, please!

The KISS principle is also offered in two other forms (for those who don’t feel good about the inclusion of the word “stupid”):

Keep it short and simple
Keep it simple and straightforward

As you can see some words may be changed, but the sense of the principle stays the same.

10. Don’t ignore the code reviews

You might be the smartest guy in the room, with the best time-management and knowledge of all the key bindings in the world, and, still, there will always be room for involving others. Everybody makes mistakes and we want to have at least a second pair of eyes to look over a solution before it goes into production. Invest in yourself and introduce pairing programming, code reviews, or some other collective practice to your development process.

‍One of the best types of code reviews is when you have a good programmer who is only a little familiar with the project looking at the code. If you need to explain all the details, you’ll learn your code better, and sometimes an outsider will see problems that you, as the insider, missed. Code reviews cost you nothing but time, but often save you much more than it takes to do it. 

Code review is an essential part of workflow, also for sharing best practices with your team. This is connected with our first tip about improving professional knowledge to improve developer productivity. 

Bonus Tip

Outsource some of your projects or use Flatlogic Products to save time and improve developer productivity!

We offer a platform with starters/templates, CRUD app generator and hosting, all combined to make a perfect solution for web development. To learn more about it, you can follow Flatlogic.com website.

Productivity is about doing more. But it’s important to make sure you are working on products and features you or your customer need, because this won’t add any value to the business. That’s why productivity is always best combined with efficiency. It’s not just about getting the job done more quickly, but focusing on the right things and producing quality work.

It can take years of discipline and practice to be productive. So, don’t push yourself too hard and expect perfection in the beginning. But we hope that following the tips from this article will help you to improve your productivity.

If you work remotely and feel like your motivation and productivity decrease, you can read our previous article Why Does Remote Work Make Us Paranoid? And What To Do About It?

The post How to Improve Developer Productivity? [Guide] appeared first on Flatlogic Blog.Flatlogic Admin Templates banner

Starting a Web App in 2022 [Research]

Participate in our research and get 70% OFF discount on all Flatlogic products! We will also make the final results public.

The team of Flatlogic is carrying out a global scientific research that aims to identify modern patterns of web application creation, specifically which tools and approaches are used to start web apps in 2022. This is the world’s first research dedicated to this specific topic.

The research is based on an anonymous online survey that consists of 20 questions related to web development. If you are planning to build a web app, whether you are an experienced software engineer or have no web development skills at all, you are eligible for the survey. We strongly ask you to take the online survey! It will help the global web development audience a lot to find out more about the recent approaches to web app development.

We focus on uncovering a diverse representation of the usage of technologies, stacks, methodologies and other dev instruments used by coders that will help us and global audience to understand the patterns of the modern web app creation process.

We plan to advertise the survey to our socials and seek ways to earn responses from those who may not be frequent on our sites.

We look forward to your responses on how to build a full stack web app — and if you share this survey on social media, be sure to tag us! We are commited to share the results with you.

Ready? Steady?
Go!

The post Starting a Web App in 2022 [Research] appeared first on Flatlogic Blog.Flatlogic Admin Templates banner

356: Amit Sheen

I got to talk with Amit Sheen this week about his journey into creative coding. Even his early work is incredibly interesting and recent work is downright stunning. Now he’s entering a phase of sharing what he knows with workshops like Pushing CSS to the Limit. Here’s a list of Pens we talk about in the podcast (mostly):

Bubbling – https://codepen.io/amit_sheen/pen/BxQqxz

Turning pages – https://codepen.io/amit_sheen/pen/WNweryv

Bouncing off the walls – https://codepen.io/amit_sheen/pen/abBgWvJ

House of CSS cards – https://codepen.io/amit_sheen/pen/QWGjRKR

FlipBoxes – https://codepen.io/amit_sheen/pen/YzQoMxR

RadioPoles – https://codepen.io/amit_sheen/pen/RwZwGVQ

3D Wobbly Disco – https://codepen.io/amit_sheen/pen/LYLQQpW4D

4D SimplexNoise – https://codepen.io/amit_sheen/pen/XWgVKxO

Typing effect – https://codepen.io/amit_sheen/pen/YzZYoMV

Text morphing – https://codepen.io/amit_sheen/pen/xxqYzvm

csStickman – https://codepen.io/amit_sheen/pen/abLPdoQ

The Lonely Claw – https://codepen.io/amit_sheen/pen/yLzWVYo

Newton’s CSS cradle – https://codepen.io/amit_sheen/pen/XWMXwvJ

Table tenniCSS – https://codepen.io/amit_sheen/pen/PobQjMX

Time Jumps

00:22 Guest introduction

01:17 2018 Pens

03:14 Smashing Magazine workshop

04:21 Bubbling

07:01 Turning pages

11:29 Sponsor: Retool

12:53 csStickman

17:24 The Lonely Claw

23:29 Bouncing off the walls

26:22 Cheat codes for successful

31:34 Text morphing

34:26 Table tenniCSS

Sponsor: Retool

Custom dashboards, admin panels, CRUD apps—build any internal tool faster in Retool. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time.

Thousands of teams at companies like Amazon, DoorDash, Peloton, and Brex collaborate around custom-built Retool apps to solve internal workflows. To learn more, visit retool.com.

The post 356: Amit Sheen appeared first on CodePen Blog.Flatlogic Admin Templates banner

354: With Steve Gardner

We’ve got Steve Gardner on this week! We get into all sorts of nitty gritty detail on the ol’ Christmas Cannon, a Pen of pure joy. Steve has some absolute classics that show off the web at it’s very best, like the Airplanes Pen. Can’t beat Steve’s cleverness and execution.

Time Jumps

00:46 Hard to be creative sometimes

01:56 Christmas cannon pen

04:00 Mouthblogging the Pen

06:14 What is Blender?

07:46 How do you plop the graphics together?

11:17 Sponsor: Netlify

12:38 This is for fun

16:43 What’s the deal with your avatar?

18:25 Easter eggs on the web

20:34 Animation and digital design

21:48 Using Greensock

22:35 Airplane Pen

26:05 Do clients want you to recreate your Pens?

Sponsor: Netlify

Quirrel Joins Netlify and now we have Scheduled Functions (in Beta)! Wanna run your cloud functions on a time-based schedule? Now you can without even leaving your repo.

The post 354: With Steve Gardner appeared first on CodePen Blog.Flatlogic Admin Templates banner