Javascript

State of Node.js Wrap-up

Apr 10, 2023

3 min read

In this State of Node.js event, our panelists discussed updates, LTS releases and APIs with Node.js maintainers, technical steering committee members and collaborators, and much more.

In this wrap-up, we will take a deeper look into these latest developments and explore what is on the horizon for Node.js. You can watch the full State of Node.js event on the This Dot Media YouTube Channel.

Here is a complete list of the host and panelists that participated in this online event.

Hosts:

Tracy Lee, CEO, This Dot Labs, @ladyleet
James Snell, Node.js Foundation Technical Steering Committee, @jasnell

Panelists:

Beth Griggs, Senior Software Engineer, Red Hat, Node.js TSC Member, @BethGriggs_
Matteo Collina, Co-Founder and CTO of Platformatic.dev, Node.js TSC member, @matteocollina
Michael Dawson, Node.js Lead, Red Hat and IBM, @mhdawson1

General state of Node.js

Michael kicks off the conversation saying there are a lot of things happening with Node.js right now. There were over a billion downloads last year alone, and it is continuing to grow.

Beth talked about the major release of Node v20 coming out in April. Node 14 end of life is coming at the end of April.

Matteo talked about two micro conferences happening this year for Node.js. One will be in North America in Vancouver in May, and the other one is in September in Bilbao.

Updates from specific working groups

Michael talks about spinning up a uvwasi team. The wasi is the web assembly system interface. It’s not only used in Node, but in other projects like grain. It’s a key component of wasm support.

Michael also talks about how the Node.js API team has been great for building long term contributors. If you’re interested in add-ons and native code, it is a friendly group to get involved with.

Beth talks about other ways folks can contribute to Node.js. She talks about a redesign of the website that happened recently. The main website has been migrated over to Next.js.

Matteo talks about a massive PR that is open right now about the new loader API. There is a lot of effort being put into this with a lot of contributors. This new loader will replace the - - hack.

New Features

Michael talks about the single executable application that enables bundling code into the Node.js binaries without having to build it. He also mentions process permissions. These are two big new experimental features right now.

Beth talks about the built-in test runner. It allows you to throw some scripts together, and get some simple tests without having to deal with dependable warnings for a mod.

End of Event

Each panelist takes time to go over what they are currently doing on their own. Beth is working in security for releases, and takes time to talk about everything there.

Michael is working with the Node API, which is a long-term working project. James is work on standard APIs and also bringing interoperability with Node, Bun, and Dino.

Finally, Matteo is working on getting Platformatic going.

Conclusion

The conversation went in depth about the state of Node.js, and what is being done in the new releases as well as experimental updates. The panelists were very engaged, and were great at bringing up ways to get involved with the Node community. You can watch the full State of Node.js event on the This Dot Media Youtube Channel.

This Dot Labs is a development consultancy that is trusted by top industry companies, including Stripe, Xero, Wikimedia, Docusign, and Twilio. This Dot takes a hands-on approach by providing tailored development strategies to help you approach your most pressing challenges with clarity and confidence. Whether it's bridging the gap between business and technology or modernizing legacy systems, you’ll find a breadth of experience and knowledge you need. Check out how This Dot Labs can empower your tech journey.

Bruce Wiggleston

@brucerw3 @BruceRW3

Testing a Fastify app with the NodeJS test runner

Introduction Node.js has shipped a built-in test runner for a couple of major versions. Since its release I haven’t heard much about it so I decided to try it out on a simple Fastify API server application that I was working on. It turns out, it’s pretty good! It’s also really nice to start testing a node application without dealing with the hassle of installing some additional dependencies and managing more configurations. Since it’s got my stamp of approval, why not write a post about it? In this post, we will hit the highlights of the testing API and write some basic but real-life tests for an API server. This server will be built with Fastify, a plugin-centric API framework. They have some good documentation on testing that should make this pretty easy. We’ll also add a SQL driver for the plugin we will test. Setup Let's set up our simple API server by creating a new project, adding our dependencies, and creating some files. Ensure you’re running node v20 or greater (Test runner is a stable API as of the 20 major releases) Overview `index.js` - node entry that initializes our Fastify app and listens for incoming http requests on port 3001 `app.js` - this file exports a function that creates and returns our Fastify application instance `sql-plugin.js` - a Fastify plugin that sets up and connects to a SQL driver and makes it available on our app instance Application Code A simple first test For our first test we will just test our servers index route. If you recall from the app.js` code above, our index route returns a 501 response for “not implemented”. In this test, we're using the createApp` function to create a new instance of our Fastify app, and then using the `inject` method from the Fastify API to make a request to the `/` route. We import our test utilities directly from the node. Notice we can pass async functions to our test to use async/await. Node’s assert API has been around for a long time, this is what we are using to make our test assertions. To run this test, we can use the following command: By default the Node.js test runner uses the TAP reporter. You can configure it using other reporters or even create your own custom reporters for it to use. Testing our SQL plugin Next, let's take a look at how to test our Fastify Postgres plugin. This one is a bit more involved and gives us an opportunity to use more of the test runner features. In this example, we are using a feature called Subtests. This simply means when nested tests inside of a top-level test. In our top-level test call, we get a test parameter t` that we call methods on in our nested test structure. In this example, we use `t.beforeEach` to create a new Fastify app instance for each test, and call the `test` method to register our nested tests. Along with `beforeEach` the other methods you might expect are also available: `afterEach`, `before`, `after`. Since we don’t want to connect to our Postgres database in our tests, we are using the available Mocking API to mock out the client. This was the API that I was most excited to see included in the Node Test Runner. After the basics, you almost always need to mock some functions, methods, or libraries in your tests. After trying this feature, it works easily and as expected, I was confident that I could get pretty far testing with the new Node.js core API’s. Since my plugin only uses the end method of the Postgres driver, it’s the only method I provide a mock function for. Our second test confirms that it gets called when our Fastify server is shutting down. Additional features A lot of other features that are common in other popular testing frameworks are also available. Test styles and methods Along with our basic test` based tests we used for our Fastify plugins - `test` also includes `skip`, `todo`, and `only` methods. They are for what you would expect based on the names, skipping or only running certain tests, and work-in-progress tests. If you prefer, you also have the option of using the describe` → `it` test syntax. They both come with the same methods as `test` and I think it really comes down to a matter of personal preference. Test coverage This might be the deal breaker for some since this feature is still experimental. As popular as test coverage reporting is, I expect this API to be finalized and become stable in an upcoming version. Since this isn’t something that’s being shipped for the end user though, I say go for it. What’s the worst that could happen really? Other CLI flags —watch` - https://nodejs.org/dist/latest-v20.x/docs/api/cli.html#--watch —test-name-pattern` - https://nodejs.org/dist/latest-v20.x/docs/api/cli.html#--test-name-pattern TypeScript support You can use a loader like you would for a regular node application to execute TypeScript files. Some popular examples are tsx` and `ts-node`. In practice, I found that this currently doesn’t work well since the test runner only looks for JS file types. After digging in I found that they added support to locate your test files via a glob string but it won’t be available until the next major version release. Conclusion The built-in test runner is a lot more comprehensive than I expected it to be. I was able to easily write some real-world tests for my application. If you don’t mind some of the features like coverage reporting being experimental, you can get pretty far without installing any additional dependencies. The biggest deal breaker on many projects at this point, in my opinion, is the lack of straightforward TypeScript support. This is the test command that I ended up with in my application: I’ll be honest, I stole this from a GitHub issue thread and I don’t know exactly how it works (but it does). If TypeScript is a requirement, maybe stick with Jest or Vitest for now 🙂...

Nov 29, 2023

5 mins

NodeJSTypeScriptTesting

How to automatically deploy your full-stack JavaScript app with AWS CodePipeline

How to automatically deploy your full-stack JavaScript app from an NX monorepo with AWS CodePipeline In our previous blog post (How to host a full-stack JavaScript app with AWS CloudFront and Elastic Beanstalk) we set up a horizontally scalable deployment for our full-stack javascript app. In this article, we would like to show you how to set up AWS CodePipeline to automatically deploy changes to the application. APP Structure Our application is a simple front-end with an API back-end set up in an NX monorepo. The production built API code is hosted in Elastic Beanstalk, while the front-end is stored in S3 and hosted through CloudFront. Whenever we are ready to make a new release, we want to be able to deploy the new API and front-end versions to the existing distribution. In this article, we will set up a CodePipeline to deploy changes to the main branch of our connected repository. CodePipeline CodeBuild and the buildspec file First and foremost, we should set up the build job that will run the deploy logic. For this, we are going to need to use CodeBuild. Let's go into our repository and set up a build-and-deploy.buildspec.yml` file. We put this file under the `tools/aws/` folder. `yaml version: 0.2 phases: install: runtime-versions: nodejs: 18 on-failure: ABORT commands: - npm ci build: on-failure: ABORT commands: # Build the front-end and the back-end - npm run build:$ENVIRONMENTTARGET # TODO: Push FE to S3 # TODO: Push API to Elastic beanstalk ` This buildspec file does not do much so far, we are going to extend it. In the installation phase, it will run npm ci` to install the dependencies and in the build phase, we are going to run the build command using the `ENVIRONMENT_TARGET` variable. This is useful, because if you have more environments, like `development` and `staging` you can have different configurations and builds for those and still use the same buildspec file. Let's go to the Codebuild page in our AWS console and create a build project. Add a descriptive name, such as your-appp-build-and-deploy`. Please provide a meaningful description for your future self. For this example, we are going to restrict the number of concurrent builds to 1. The next step is to set up the source for this job, so we can keep the buildspec file in the repository and make sure this job uses the steps declared in the yaml file. We use an access token that allows us to connect to GitHub. Here you can read more on setting up a GitHub connection with an access token. You can also connect with Oauth, or use an entirely different Git provider. We set our provider to GitHub and provided the repository URL. We also set the Git clone depth to 1, because that makes checking out the repo faster. In the Environment` section, we recommend using an AWS CodeBuild managed image. We use the Ubuntu Standard runtime with the `aws/codebuild/standard:7.0` version. This version uses Node 18. We want to always use the latest image version for this runtime and as the `Environment type` we are good with `Linux EC2`. We don't need elevated privileges, because we won't build docker images, but we do want to create a new service role. In the Buildspec` section select `Use a buildspec file` and give the path from your repository root as the `Buildspec name`. For our example, it is `tools/aws/build-and-deploy.buildspec.yml`. We leave the `Batch configuration` and the `Artifacts` sections as they are and in the `Logs` section we select how we want the logs to work. For this example, to reduce cost, we are going to use S3 logs and save the build logs in the `aws-codebuild-build-logs` bucket that we created for this purpose. We are finished, so let's create the build project. CodePipeline setup To set up automated deployment, we need to create a CodePipeline. Click on Create pipeline` and give it a name. We also want a new service role to be created for this pipeline. Next, we should set up the source stage. As the source provider, we need to use GitHub (version2)` and set up a connection. You can read about how to do it here. After the connection is set up, select your repository and the branch you want to deploy from. We also want to start the pipeline if the source code changes. For the sake of simplicity, we want to have the Output artefact format as CodePipeline default. At the Build stage, we select AWS CodeBuild` as the build provider and let's select the build that we created above. Remember that we have the `ENVIRONMENT_TARGET` as a variable used in our build, so let's add it to this stage with the `Plaintext` value `prod`. This way the build will run the `build:prod` command from our `package.json`. As the `Build type` we want `Single build`. We can skip the deployment stage because we are going to set up deployment in our build job. Review our build pipeline and create it. After it is created, it will run for the first time. At this time it will not deploy anything but it should run successfully. Deployment prerequisites To be able to deploy to S3 and Elastic Beanstalk, we need our CodeBuild job to be able to interact with those services. When we created the build, we created a service role for it. In this example, the service role is codebuild-aws-test-build-and-deploy-service-role`. Let's go to the IAM page in the console and open the `Roles` page. Search for our codebuild role and let's add permissions to it. Click the `Add permissions` button and select `Attach policies`. We need two AWS-managed policies to be added to this service role. The `AdministratorAccess-AWSElasticBeanstalk` will allow us to deploy the API and the `AmazonS3FullAccess` will allow us to deploy the front-end. The `CloudFrontFullAccess` will allow us to invalidate the caches so CloudFront will send the new front-end files after the deployment is ready. Deployment Upload the front-end to S3 Uploading the front-end should be pretty straightforward. We use an AWS CodeBuild managed image in our pipeline, therefore, we have access to the aws` command. Let's update our buildspec file with the following changes: `yaml phases: ... build: on-failure: ABORT commands: # Build the front-end and the back-end - npm run build:$ENVIRONMENTTARGET # Delete the current front-end and deploy the new version front-end - aws s3 sync dist/apps/frontend/ s3://$FRONTEND_BUCKET --delete # Invalidate cloudfront caches to immediately serve the new front-end files - aws cloudfront create-invalidation --distribution-id $CLOUDFRONTDISTRIBUTION_ID --paths "/index.html" # TODO: Push API to Elastic beanstalk ` First, we upload the fresh front-end build to the S3 bucket, and then we invalidate the caches for the index.html` file, so CloudFront will immediately serve the changes. If you have more static files in your app, you might need to invalidate caches for those as well. Before we push the above changes up, we need to update the environment variables in our CodePipeline. To do this open the pipeline and click on the Edit` button. This will then enable us to edit the `Build` stage. Edit the build step by clicking on the edit button. On this screen, we add the new environment variables. For this example, it is aws-hosting-prod` as `Plaintext` for the `FRONT_END_BUCKET` and `E3FV1Q1P98H4EZ` as `Plaintext` for the `CLOUDFRONT_DISTRIBUTION_ID` Now if we add changes to our index.html file, for example, change the button to HELLO 2`, commit it and push it. It gets deployed. Deploying the API to Elastic Beanstalk We are going to need some environment variables passed down to the build pipeline to be able to deploy to different environments, like staging or prod. We gathered these below: - COMMIT_ID`: `#{SourceVariables.CommitId}` - This will have the commit id from the checkout step. We include this, so we can always check what commit is deployed. - ELASTIC_BEANSTALK_APPLICATION_NAME`: `Test AWS App` - This is the Elastic Beanstalk app which has your environment associated. - ELASTIC_BEANSTALK_ENVIRONMENT_NAME`: `TestAWSApp-prod` - This is the Elastic Beanstalk environment you want to deploy to - API_VERSION_BUCKET`: `elasticbeanstalk-us-east-1-474671518642` - This is the S3 bucket that was created by Elastic Beanstalk With the above variables, we can make some new variables during the build time, so we can make sure that every API version is unique and gets deployed. We set this up in the install phase. `yaml ... phases: install: runtime-versions: nodejs: 18 on-failure: ABORT commands: - APPVERSION=`jq '.version' -j package.json` - APIVERSION=$APP_VERSION-build$CODEBUILD_BUILD_NUMBER - APIZIP_KEY=$COMMIT_ID-api.zip - 'APPVERSION_DESCRIPTION="$AP_VERSION: $COMMIT_ID"' - npm ci ... ` The APP_VERSION` variable is the version property from the `package.json` file. In a release process, the application's version is stored here. The `API_VERSION` variable will contain the `APP_VERSION` and as a suffix, we include the build number. We want to upload this API version by indicating the commit ID, so the `API_ZIP_KEY` will have this information. The `APP_VERSION_DESCRIPTION` will be the description of the deployed version in Elastic Beanstalk. Finally, we are going to update the buildspec file with the actual Elastic Beanstalk deployment steps. `yaml phases: ... build: on-failure: ABORT commands: # ... # ZIP the API - zip -r -j dist/apps/api.zip dist/apps/api # Upload the API bundle to S3 - aws s3 cp dist/apps/api.zip s3://$APIVERSION_BUCKET/$ENVIRONMENT_TARGET/$API_ZIP_KEY # Create new API version in Elastic Beanstalk - aws elasticbeanstalk create-application-version --application-name "$ELASTICBEANSTALK_APPLICATION_NAME" --version-label "$API_VERSION" --description "$APP_VERSION_DESCRIPTION" --source-bundle "S3Bucket=$API_VERSION_BUCKET,S3Key=$ENVIRONMENT_TARGET/$API_ZIP_KEY" # Deploy new API version - aws elasticbeanstalk update-environment --application-name "$ELASTICBEANSTALK_APPLICATION_NAME" --version-label "$API_VERSION" --environment-name "$ELASTIC_BEANSTALK_ENVIRONMENT_NAME" # Wait until the Elastic Beanstalk environment is stable - aws elasticbeanstalk wait environment-updated --application-name "$ELASTICBEANSTALK_APPLICATION_NAME" --environment-name "$ELASTIC_BEANSTALK_ENVIRONMENT_NAME" ` Let's make a change in the API, for example, the message sent back by the /api/hello` endpoint and push up the changes. --- Now every time a change is merged to the main` branch, it gets pushed to our production deployment. Using these guides, you can set up multiple environments, and you can configure separate CodePipeline instances to deploy from different branches. I hope this guide proved to be helpful to you....

Sep 15, 2023

9 mins

AWSNxNodeJSJavaScript

State of Meta Frameworks Recap

In this State of Meta Frameworks event, our panelists discussed the current State of Meta Frameworks. This wrap-up covers the panel discussion on the ever-evolving state of meta frameworks in the digital landscape. Our expert panelists delved into the latest trends, advancements, and challenges faced by developers and businesses in adopting and utilizing meta frameworks effectively. You can watch the full State of Meta Frameworks event on the This Dot Media YouTube channel. Here is a complete list of the host and panelists that participated in this online event. Hosts: - Dustin Goodman, Engineering Manager, This Dot, @dustinsgoodman - Mattia Magi, Senior Software Engineer, This Dot, @mattiamagi Panelists: - Ryan Carniato , Author of the SolidJS UI library and MarkoJS Core Team Member, @RyanCarniato - Ben Holmes, Software Developer, Astro, @BHolmesDev - Maya Shavin, Senior Software Engineer, Microsoft, Nuxtjs ambassador, Google Developer Expert , @MayaShavin - Andreas Ehrencrona, Head of Crown Framework Development at Hyperlab | Svelte Maintainer, ehrencrona - Amy Dutton, Lead Maintainer on the RedwoodJS Core Team, @selfteachme In 5-10 years, where do you think web application development and meta frameworks are heading with the current trend of experimentation? The discussion got off to a quick start, and there seemed to be a consensus that the web development ecosystem is currently going through a phase of experimentation, with numerous frameworks and tools popping up and evolving rapidly. This creative and innovative environment allows developers to explore various solutions, leading to a wide array of choices. Looking ahead, it's difficult to predict the exact form of an ideal development environment in 5-10 years. However, there is an expectation that the web development community will eventually converge on some consensus regarding best practices and tools. Some current practices, like hydration (the process of converting server-rendered HTML into a fully interactive application on the client-side), might be considered wasteful in an idealized future and could be replaced with more efficient approaches. One significant consideration for the future of web development is competition between web applications and mobile apps. While the web has advantages in terms of faster initial loading and no need to download large app files, mobile apps are often perceived as having better user experiences. Closing the gap between web and app experiences will likely be a focus in the coming years. The ease of creating meta frameworks is seen as a positive aspect of the current ecosystem. The availability of bundlers and underlying tooling has made it possible for developers to build their frameworks on top of existing libraries and tools. This ease of creation has led to an explosion of ideas and innovation in the space. However, the growing complexity and the abundance of choices can also be overwhelming for newcomers to web development. The abundance of frameworks and tools may make it challenging for beginners to know where to start. Simplifying the development process and making the technology more approachable for new developers will likely be a concern for the future. There's also a cautious perspective regarding abstracting complexity too much. While meta frameworks and high-level abstractions can make development easier and faster, there's a risk of losing touch with the underlying technology and ending up with monolithic solutions that become difficult to maintain and replace. In summary, the web development landscape is currently characterized by experimentation and rapid evolution. As the community continues to explore and innovate, it is expected that the industry will eventually converge on more standardized practices and tools. Finding the right balance between abstraction and maintainability will be crucial for the future of web application development. Will other tech stacks follow Next.js in adopting server-first approaches with React's server components? The discussion revolves around Next.js adopting React's server components, which indicates a shift towards server-first approaches in their development. The conversation contemplates the potential impact of this trend and whether it might lead to similar shifts in other tech stacks. React's server components are viewed as a new and hot trend in the React ecosystem, with no similar implementations currently in other tech stacks. The participants discuss how web development has evolved over the past years, from server-rendered PHP and Rails applications to the rise of JavaScript and single-page applications (SPAs), and now the current move back towards server rendering and server component rendering. Opinions differ on the real benefits of server components compared to more established server-side rendering approaches. Some participants express support for server components, appreciating the server-first philosophy and the idea of shipping HTML from the server to the client. Others question the advantages of introducing server components when client-side models are already highly capable and suitable for building dynamic apps. The conversation touches on the challenges of adopting new approaches and integrating them with existing ecosystems. Legacy concerns and the need for education within the React community are mentioned as potential obstacles to widespread adoption. However, it's acknowledged that some frameworks have already taken the path of starting with server rendering and then adding client-side functionality later. The debate continues, with participants emphasizing the ongoing innovation and experimentation in reducing JavaScript costs and execution in the browser. Despite the differing approaches taken by underlying libraries and frameworks, there seems to be a degree of consolidation and agreement among metaframeworks in terms of handling progressive enhancement, server functions, file-based routing, and other patterns. React server components are considered a special addition to the Redwood framework, which already incorporates a back-end component, mainly focused on GraphQL. The advantages of back-end flexibility and server-side rendering, particularly for tasks like handling Open Graph meta tags, are highlighted. In conclusion, the participants express various viewpoints on the adoption of server components and server-first approaches. While there are differing opinions on their benefits and practicality, the conversation suggests that innovation and experimentation in web development will continue to shape the direction of tech stacks in the future. What advice would you give to developers just starting to learn a new meta framework, and what are the learning curves typically associated with them? For developers starting to learn a new meta framework, the panel suggests considering the purpose of their project and what they want to achieve. For simple projects like personal blogs or static sites, options like WordPress or templating with Astro may be more straightforward. However, for dynamic applications or job prospects, learning a popular component framework like React is recommended due to its extensive documentation and community support. The importance of having a strong foundation in JavaScript, HTML, and CSS is emphasized before delving into meta frameworks. For beginners, learning the fundamentals is key, and then they can progress to using a meta framework that aligns with their interests and goals. The panel acknowledges that the choice of framework might not be as crucial as many believe. The important thing is to pick one that feels comfortable and appealing, as the skills and patterns acquired will be transferable to other frameworks if needed. Job market prospects can be enhanced by being well-versed in cutting-edge frameworks, as companies using less common technologies may highly value developers with expertise in those areas. Ultimately, the advice is to avoid getting paralyzed by the fear of making the "wrong" choice and to focus on finding a framework that resonates with personal preferences and aligns with project requirements. Being adaptable and willing to learn new technologies will make a developer stand out in the job market and as a valuable consultant. What are each of you using for deployments and what is blocking other platforms? When it comes to deployments in different ecosystems, the panelists shared their experiences and challenges. They discussed the adoption of adapters to simplify deployment processes across various platforms. Some mentioned using AWS S3, Netlify, and Parcel for static sites, while others emphasized the importance of considering the platform's limitations and performance. The conversation touched on serverless functions and edge deployments, with mixed experiences across different frameworks. While some found serverless functions efficient and fast, others encountered configuration challenges and a lack of clear documentation. Overall, the panelists highlighted the ongoing experimentation and search for optimal deployment solutions, with open-source collaborations being key to driving progress in this space. What are some common misconceptions or misunderstandings about your respective frameworks? The panelists addressed common misconceptions and misunderstandings about their respective frameworks. Redwood was mistaken as a new framework, but in reality, it has been stable and established for over four years. They emphasized their focus on startups and core infrastructure, partnering with incubators to support end-users in that market. Astro clarified that it is not limited to static sites and can handle dynamic single-client rendered apps with its flexibility in mounting components. SolidJS emphasized its goal of raising the baseline of primitives in the ecosystem, encouraging the use of existing libraries and promoting a future without lock-in frameworks. Crown showcased its selling point of partial hydration for optimal performance but acknowledged the challenge of explaining the concept to potential customers. Lastly, Nuxt was differentiated from Next, and it was clarified that Nuxt is optimized for performance, aims to simplify developer experience, and is not just the "next" version of Vue. The panelists agreed that maintaining a meta framework is not easy and often involves complex version upgrading and bug fixes. Overall, the conversation shed light on the unique strengths and goals of each framework, debunking common misconceptions and providing insights into their usage and focus areas. What's causing the shift away from first-class testing in libraries and frameworks, and will we see a return to testing-first tooling? In this candid conversation, the panelists discussed the changing landscape of testing in libraries and frameworks. They acknowledged that many new releases are moving away from first-class testing in favor of end-to-end testing tools like Cypress and Playwright. Some frameworks, like Redwood, continue to support unit testing with Jest and JavaScript testing library, while others, like Svelte Kit, are shipping with Playwright out of the box. The shift seems to be driven by the complexity of modern applications, where bugs often emerge in the integration of various components and data sources. The panelists emphasized that testing needs to address the actual complexity of the application, and in some cases, end-to-end testing proves more effective in detecting bugs and ensuring the overall system works as intended. However, they also acknowledged that there are still benefits to unit testing and emphasized the importance of having both types of testing in a robust application. The challenge lies in finding the right balance and tooling to suit different types of frameworks and projects. The diversity of opinions and preferences within the community makes it difficult to prescribe a one-size-fits-all approach to testing. Some frameworks prioritize ease of use and simplicity for beginners, while others lean towards comprehensive end-to-end testing for complex applications. Overall, the future of testing-first tooling remains uncertain. While there may be a shift back towards unit testing in some cases, it seems that the focus will be on finding the right combination of testing approaches that best suit the specific needs and complexities of individual frameworks and applications. Q&A What are the panelists thoughts on Docusaurus? The panelists discussed their thoughts on documentation tools, particularly Docusaurus. Some mentioned using their own custom solutions or other frameworks like Vpress and VuePress in the Vue ecosystem. Astro introduced their own documentation starter called Starlight, which aims to bring Docusaurus-like features to static templating languages open to any framework. The panel also mentioned Next.js and how the React 18 documentation process used custom React components rather than Docusaurus. The focus on partial hydration was highlighted as a key factor that can make documentation sites even better. Overall, the discussion reflected a diverse range of approaches and preferences when it comes to maintaining documentation for projects. Is transpiling a necessary technique anymore, and what are the panelists’ thoughts on infrastructure as code? The panelists had an interesting discussion about transpiling and infrastructure as code. Regarding transpiling, there was a consensus that while modernizing code to ESM (ECMAScript modules) is becoming more accessible, transpiling will still be necessary for a variety of reasons, including ensuring optimal performance and compatibility with different environments. The panel acknowledged that build tools and compilers are still widely used and will likely remain integral to the development process. On the topic of infrastructure as code, the conversation centered around how frameworks are starting to offer more opinionated solutions for deploying applications seamlessly. Next.js, for example, automatically infers whether a page should be deployed as serverless or static based on code patterns and fetch calls. However, there were also concerns about the potential challenges and risks of overly automatic decisions when it comes to deploying and managing infrastructure. Astra's approach of explicit configuration and allowing developers to set defaults for routes was noted as a more conservative and safer option. The discussion highlighted the ongoing evolution of these practices and how different frameworks are approaching the challenges of modern web development, providing varying degrees of automation and flexibility for developers. The general consensus was that while transpiling and infrastructure as code practices are continuously improving, they will still be essential components of web development for the foreseeable future. Can you discuss a challenging problem you encountered while developing your meta framework and how you solved it? During the discussion, the panelists shared challenging problems they encountered while developing their respective meta frameworks and how they approached solving them. One major challenge for Redwood was integrating GraphQL into their framework. While GraphQL can be powerful, not everyone is comfortable using it. Redwood aimed to simplify the process by providing conventions and handling complexities, making it easier for developers to work with GraphQL. This allowed applications to scale better, addressing over-fetching and waterfall issues. In the Crown framework, caching was a primary focus due to the heavy reliance on third-party data sources that were not always fast enough. To tackle this, they implemented various caching mechanisms, including in-memory caches, persistent caches (e.g., Redis), and HTTP caching. They utilized decorators to specify which data should be cached and employed patterns like "reusing stale while revalidating" to ensure fresh data while maintaining fast response times. For another panelist, the most challenging aspects of their meta framework were related to adapters and runtime components. They faced difficulties in balancing a generic interface for deploying apps anywhere while leveraging specific features of different platforms. Integrating platform-specific features without making the framework feel too platform-dependent was a considerable challenge. They explored the potential of generalizing certain aspects, such as key-value stores, to address common needs across platforms. The panelists emphasized that navigating the ever-evolving landscape of serverless and edge computing, and integrating the innovations from various platforms without compromising the core functionalities of their frameworks, required careful consideration and creative problem-solving. Overall, the discussion shed light on the complexities and ongoing efforts to build user-friendly and powerful meta frameworks in the dynamic world of web development. What are some of the most innovative or unexpected ways you’ve seen your frameworks being used? During the lively discussion, the panelists shared some unexpected and innovative ways their frameworks have been used in real-world scenarios. For instance, with Astro, they were pleasantly surprised to see Bloomberg experimenting with using it to template news articles. It was used alongside their existing framework in A/B tests, demonstrating Astro's versatility and ease of integration with other platforms. Additionally, Astro's middleware mode was another exciting discovery, allowing it to be deployed as a node server middleware, making it even more adaptable for existing projects. Redwood, on the other hand, was amazed by the diverse range of use cases their framework supported, from consumer applications to deep vertical SaaS implementations. The community's adoption of Redwood for various purposes showcased its flexibility and robustness. In the case of SolidJS, the team was surprised to find developers using Solid as the foundation for mobile apps and Electron applications. Solid's client-only mode was adapted for these use cases, demonstrating its potential to support mobile development and native-like experiences. A particularly jaw-dropping example came from the Svelte community, where developers managed to recreate the classic game Wolfenstein 3D in the browser using just DOM elements and CSS 3D transforms. This creative use of Svelte showcased its DOM manipulation capabilities and the powerful potential of modern browsers. Overall, the panelists were impressed by the ingenious ways developers harnessed the capabilities of their frameworks to solve unique challenges and create unconventional applications. Conclusion The overall discussion provided a glimpse into the dynamic and exciting world of meta frameworks and the ever-evolving possibilities they bring to web development. With such remarkable use cases and continuous innovation, the future of meta frameworks looks promising. The panelists expressed their gratitude to the audience for joining and participating in the event, and they all looked forward to meeting again in future events....

Jul 28, 2023

12 mins

JS FrameworkJavaScript

Nuxt DevTools v1.0: Redefining the Developer Experience Beyond Conventional Tools

In the ever-evolving world of web development, Nuxt.js has taken a monumental leap with the launch of Nuxt DevTools v1.0. More than just a set of tools, it's a game-changer—a faithful companion for developers. This groundbreaking release, available for all Nuxt projects and being defaulted from Nuxt v3.8 onwards, marks the beginning of a new era in developer tools. It's designed to simplify our development journey, offering unparalleled transparency, performance, and ease of use. Join me as we explore how Nuxt DevTools v1.0 is set to revolutionize our workflow, making development faster and more efficient than ever. What makes Nuxt DevTools so unique? Alright, let's start delving into the features that make this tool so amazing and unique. There are a lot, so buckle up! In-App DevTools The first thing that caught my attention is that breaking away from traditional browser extensions, Nuxt DevTools v1.0 is seamlessly integrated within your Nuxt app. This ensures universal compatibility across browsers and devices, offering a more stable and consistent development experience. This setup also means the tools are readily available in the app, making your work more efficient. It's a smart move from the usual browser extensions, making it a notable highlight. To use it you just need to press Shift + Option + D` (macOS) or `Shift + Alt + D` (Windows): With simple keystrokes, the Nuxt DevTools v1.0 springs to life directly within your app, ready for action. This integration eliminates the need to toggle between windows or panels, keeping your workflow streamlined and focused. The tools are not only easily accessible but also intelligently designed to enhance your productivity. Pages, Components, and Componsables View The Pages, Components, and Composables View in Nuxt DevTools v1.0 are a clear roadmap for your app. They help you understand how your app is built by simply showing its structure. It's like having a map that makes sense of your app's layout, making the complex parts of your code easier to understand. This is really helpful for new developers learning about the app and experienced developers working on big projects. Pages View lists all your app's pages, making it easier to move around and see how your site is structured. What's impressive is the live update capability. As you explore the DevTools, you can see the changes happening in real-time, giving you instant feedback on your app's behavior. Components View is like a detailed map of all the parts (components) your app uses, showing you how they connect and depend on each other. This helps you keep everything organized, especially in big projects. You can inspect components, change layouts, see their references, and filter them. By showcasing all the auto-imported composables, Nuxt DevTools provides a clear overview of the composables in use, including their source files. This feature brings much-needed clarity to managing composables within large projects. You can also see short descriptions and documentation links in some of them. Together, these features give you a clear picture of your app's layout and workings, simplifying navigation and management. Modules and Static Assets Management This aspect of the DevTools revolutionizes module management. It displays all registered modules, documentation, and repository links, making it easy to discover and install new modules from the community! This makes managing and expanding your app's capabilities more straightforward than ever. On the other hand, handling static assets like images and videos becomes a breeze. The tool allows you to preview and integrate these assets effortlessly within the DevTools environment. These features significantly enhance the ease and efficiency of managing your app's dynamic and static elements. The Runtime Config and Payload Editor The Runtime Config and Payload Editor in Nuxt DevTools make working with your app's settings and data straightforward. The Runtime Config lets you play with different configuration settings in real time, like adjusting settings on the fly and seeing the effects immediately. This is great for fine-tuning your app without guesswork. The Payload Editor is all about managing the data your app handles, especially data passed from server to client. It's like having a direct view and control over the data your app uses and displays. This tool is handy for seeing how changes in data impact your app, making it easier to understand and debug data-related issues. Open Graph Preview The Open Graph Preview in Nuxt DevTools is a feature I find incredibly handy and a real time-saver. It lets you see how your app will appear when shared on social media platforms. This tool is crucial for SEO and social media presence, as it previews the Open Graph tags (like images and descriptions) used when your app is shared. No more deploying first to check if everything looks right – you can now tweak and get instant feedback within the DevTools. This feature not only streamlines the process of optimizing for social media but also ensures your app makes the best possible first impression online. Timeline The Timeline feature in Nuxt DevTools is another standout tool. It lets you track when and how each part of your app (like composables) is called. This is different from typical performance tools because it focuses on the high-level aspects of your app, like navigation events and composable calls, giving you a more practical view of your app's operation. It's particularly useful for understanding the sequence and impact of events and actions in your app, making it easier to spot issues and optimize performance. This timeline view brings a new level of clarity to monitoring your app's behavior in real-time. Production Build Analyzer The Production Build Analyzer feature in Nuxt DevTools v1.0 is like a health check for your app. It looks at your app's final build and shows you how to make it better and faster. Think of it as a doctor for your app, pointing out areas that need improvement and helping you optimize performance. API Playground The API Playground in Nuxt DevTools v1.0 is like a sandbox where you can play and experiment with your app's APIs. It's a space where you can easily test and try out different things without affecting your main app. This makes it a great tool for trying out new ideas or checking how changes might work. Some other cool features Another amazing aspect of Nuxt DevTools is the embedded full-featured VS Code. It's like having your favorite code editor inside the DevTools, with all its powerful features and extensions. It's incredibly convenient for making quick edits or tweaks to your code. Then there's the Component Inspector. Think of it as your code's detective tool. It lets you easily pinpoint and understand which parts of your code are behind specific elements on your page. This makes identifying and editing components a breeze. And remember customization! Nuxt DevTools lets you tweak its UI to suit your style. This means you can set up the tools just how you like them, making your development environment more comfortable and tailored to your preferences. Conclusion In summary, Nuxt DevTools v1.0 marks a revolutionary step in web development, offering a comprehensive suite of features that elevate the entire development process. Features like live updates, easy navigation, and a user-friendly interface enrich the development experience. Each tool within Nuxt DevTools v1.0 is thoughtfully designed to simplify and enhance how developers build and manage their applications. In essence, Nuxt DevTools v1.0 is more than just a toolkit; it's a transformative companion for developers seeking to build high-quality web applications more efficiently and effectively. It represents the future of web development tools, setting new standards in developer experience and productivity....

Dec 1, 2023

8 mins

VueNuxtJSDevToolsJavaScript