DEV Community: Filipe Névola

AI, Cursor, Verbosity and Meteor without frontend frameworks

Filipe Névola — Sun, 29 Sep 2024 13:40:36 +0000

Cursor: Changing the IDE Game

Cursor provides three modes: Inline, Composer, and Chat. These modes offer unique ways to interact with AI during coding. However, they are not without their drawbacks.

You might want to skip this section if you're a VSCode enthusiast who's never experienced JetBrains IDEs. As I say, ignorance is bliss, especially when it comes to food taste and IDEs.

For those familiar with more robust IDEs, Cursor's limitations become apparent:

Code navigation features are lacking (find usages, go-to reference, go-to implementation, etc.)
Git integration is limited
Search, find, and replace capabilities are weak

I know it inherits all of VSCode's issues, but even when I configure 30+ keyboard shortcuts to do things I do naturally on JetBrains IDEs, the experience is still sufferable.

What is the possible best setup today?

Use Cursor for AI-specific coding tasks and WebStorm (or other JetBrains IDEs) for everything else. The dream scenario would be JetBrains shamelessly copying all of Cursor's features.

Cursor's AI capabilities shine because it:

Utilizes Claude 3.5 Sonnet
Provides three distinct interaction methods
Allows Composer to modify and create multiple files simultaneously
Offers separate diff and apply actions

Imagine having JetBrains' superior diff feature in Cursor – that would be a game-changer.

To expand on "AI-specific coding tasks":

I still prefer to code myself in many cases, though I expect these instances to decrease over time. I believe the sweet spot for AI now is handling simple tasks, especially in unfamiliar projects or when dealing with verbose tasks.

Verbosity: No Longer a Developer's Nemesis?

Verbosity has long been a thorn in developers' sides, but AI-generated code is shifting this paradigm. This change could make verbose languages like Java and tools like TailwindCSS more palatable to developers.

Meteor Frontend Without Frameworks: A Fresh Perspective

Exploring Meteor's reactivity without client-side frameworks unveils how powerful the Meteor's reactive model is on its foundation. Here's a quick demo:

// Function to render the video list
function renderVideoList(videoList) {
  let content = `
    <h2>YouTube Videos</h2>
    <div>
      <input type="text" id="newVideoUrl" placeholder="Enter YouTube URL">
      <button id="addVideoBtn">Add Video</button>
    </div>
    <ul>
  `;
  content += videoList.map(video => `
    <li>
      ${video.url}
      <button onclick="removeVideo('${video._id}')">Remove</button>
    </li>
  `).join('');
  content += '</ul>';
  renderHTML('app', content);

  // Add event listeners
  document.getElementById('addVideoBtn').addEventListener('click', addVideo);
  document.getElementById('newVideoUrl').addEventListener('keypress', handleNewVideoKeyPress);
}

// Simple function to render HTML using JavaScript
function renderHTML(elementId, content) {
  const element = document.getElementById(elementId);
  if (element) {
    element.innerHTML = content;
  } else {
    console.error(`Element with id "${elementId}" not found.`);
  }
}

window.removeVideo = async function(videoId) {
  try {
    await Meteor.callAsync('videos.remove', videoId);
    // If successful, the UI should update automatically if you're using Tracker or ReactiveVar
  } catch (error) {
    console.error('Error removing video:', error);
    // Optionally, show an error message to the user
  }
};

Meteor.startup(() => {
  console.log('Meteor.startup');
  Meteor.subscribe('youtubeVideos');

  // Set up the reactive computation
  Tracker.autorun(() => {
    const videoList = YoutubeVideosCollection.find().fetch();
    renderVideoList(videoList);
  });
});

As you can see, this HTML was generated by AI, so it was "coded in English," and I didn't have to type anything. Meteor's powerful foundation allowed me to create very simple code that is reactive and updates the UI in real-time without any UI framework.

Why does this matter, and why I'm talking about it in this post?

Because AI can now generate HTML based on natural language requests with ease and speed.

Conclusion: Embracing the New Era

While we're not suggesting abandoning frameworks altogether, we're undoubtedly entering a new age where verbosity is becoming less of an issue for developers. It's time to consider embracing new patterns and languages.

Good libraries and frameworks offer much more than just reducing verbosity. They optimize performance for common cases and propose innovative solutions to problems. However, exploring life without them is occasionally beneficial, as this can lead to fresh ideas and perspectives.

As a bonus insight: TailwindCSS's verbose nature, once considered a drawback, is now less significant in the age of AI-assisted development. Some might call this lucky timing, but as the saying goes, "luck favors the prepared." TailwindCSS's success is a testament to its creators' hard work and foresight, who positioned themselves perfectly for this new era of development (with a good pinch of luck).

What is a Web App? And Why Does it Matter?

Filipe Névola — Wed, 25 Sep 2024 11:17:52 +0000

Hello! Let's dive into the world of web apps.

Defining a Web App

A web app is typically browser-based. Key characteristics include:

Platform independence (no reliance on specific operating systems)
Runs on any device, including mobile
Internet-dependent (at least for initial loading)
Dynamic content (frequent updates)

Technologies Behind Web Apps

Essential technologies for web apps include:

Frontend: HTML, CSS, and JavaScript (WebAssembly is emerging but not yet widespread)
Backend: Various languages like Node.js, Python (with Django or Flask), Java, etc.
Databases: SQL and NoSQL options (e.g., MongoDB, PostgreSQL)

Examples of Web Apps

Some popular web apps we use daily:

Gmail
Google Docs
Trello
Slack (even when used as a desktop app, it's web-based)
Online banking
Admin dashboards

Security in Web Apps

Web apps benefit from built-in security features, such as HTTPS for encrypted data transmission. This pre-existing infrastructure saves developers from building security measures from scratch.

What's Not a Web App?

To better understand web apps, let's look at what doesn't qualify:

Native mobile apps
Native desktop apps
Command-line interfaces
Embedded systems (e.g., microwave software)
Most games (though some use web technologies)
Simple websites**
SEO-friendly websites** (these often prioritize static or server-rendered content)

The Server-Side Rendering Debate

** There's ongoing discussion about server-side rendering (SSR) versus client-side rendering for web apps. Some companies push for more SSR, partly because they have an incentive to sell server infrastructure. However, for many web apps, client-side rendering is often sufficient and can provide a better user experience.

Loading Times: A Reality Check

Let's consider loading times for web apps:

First load: ~7-8 seconds
Subsequent loads: ~1 second (thanks to caching)

For most web apps, these loading times are acceptable. Users typically don't mind waiting a few seconds for an app they'll use for an extended period.

The Hybrid Approach

At Quave, we often use a hybrid approach:

A website to present and sell the idea (optimized for SEO)
A web app for the actual product (optimized for user experience)

This combination allows us to leverage the strengths of both approaches.

Conclusion

When deciding on your app's architecture, focus on your specific needs rather than following the latest trends from big tech companies. Consider your app's requirements and user experience goals, and choose the approach that best serves your project.

Remember, technology is a big industry, and companies must make money. However, your priority should be solving your unique problems, not aligning with someone else's business model.

Think critically, and make decisions based on your app's principles, not the latest market push from big companies.

See you in the next one! Bye bye.

This content is part of the AI Proof Dev Web Apps course.

Understanding Meteor's Settings File

Filipe Névola — Wed, 13 Dec 2023 10:59:12 +0000

Understanding configuration files is essential in the world of Javascript programming and Meteor. You see, typically, most frameworks lack a standard configuration file. Instead, developers use environment variables, which they retrieve when needed. However, Meteor, about ten years ago, chose a different path and decided to introduce a settings file, which essentially transforms into an environment variable in most places.

The Basics of Meteor's Configuration

This unique feature of Meteor allows you to store all configurations in a single JSON. Meteor takes this JSON and transforms it into an environment variable. But there's no magic trick here. Meteor, on its own, loads this JSON into a variable termed Meteor.settings. So, how does it work? Let's explore.

JSON relies on key-value pairs. In the Meteor's settings file, there's a key named public. If you place any configurations within the public key, Meteor automatically forwards it to the client. As a result, you can effortlessly access whatever is public from the client side.

Understanding Public and Private Segments

However, anything that doesn't fall within this public key at the primary level does not reach the client side and remains server-side only. This unique feature is the only "magic" that Meteor performs.

The utility of this settings file from Meteor is that it can also be used to pass configurations to the client side. Usually, passing configurations to the client side warrants extra work since no environmental variables are available on the client side (considering the client side is really the user's browser, and you can't control the user's environment variables).

Think of the settings file as a configuration document that you can use to pass configurations to both the server and the client. However, it's important to distinguish what is public (and therefore accessible client-side) and what should stay only on the server.

How to Provide the Settings File to Meteor

It's crucial to provide the settings file correctly to Meteor for effective functioning. To pass these settings to the Meteor application, you must use the --settings parameter. When running your Meteor app, include the settings file as follows:

meteor --settings settings.json

In this command, settings.json is the file containing your settings. Notably, the --settings property helps Meteor recognize this file and load the configurations correctly into Meteor.settings, making the configurations available to your application. This way, you can manage server and client configurations within your Meteor application by utilizing the settings file.

Conclusion

Thus, the settings feature of Meteor simplifies a lot of tasks and provides additional ease of use for developers. The settings file is a handy tool, especially for simplifying and managing configurations effectively and efficiently.

Want to try Meteor on the server? Try zCloud. See how to use Meteor settings in zCloud here.

React Image component resilient to flaky connections

Filipe Névola — Tue, 14 Apr 2020 14:30:46 +0000

I would like to explain here how I include images in my React projects.

It's very common to use the img tag directly everywhere like this <img src="my-image.png" /> but as this is not a React component we can't apply some layer on it then I prefer to have an Image component in my apps.

In this Image component one case that I usually handle is when the image fails to load, this can happen when the user internet connection is flaky or even if the image is not available anymore, maybe the owner of the image just deleted it.

By default, the browser will display a broken image icon or something bad for the user and we don't want that. So we can use the onError property of img to trigger a state change then we can provide a different image URL that we can trust. Check the Image component code.

Then when the user's connection fails the browser will not show a broken image icon if we provide a better fallback when using this Image component, for instance, in a PersonImage component that displays the user profile picture in our app.

I believe you are thinking: how the browser is going to load the fallback image anyway if the connection is failing? Well, we can add in our HTML head section a preload link to load our fallback image in advance:

That is it, simple and straightforward. Are you doing something like this in our React apps? Did you know about onError property already? Leave a comment 😉

Announcing Meteor 1.10

Filipe Névola — Thu, 19 Mar 2020 19:15:26 +0000

Meteor 1.10 is a release full of exciting updates such as Cordova, MongoDB, option to exclude architectures, new Meteor DevTools and more

We started working on Meteor 1.10 last December by updating Cordova and MongoDB to the latest versions. Since then, we have included the ability to exclude specific architectures in development, new Meteor DevTools and much more.

During this release, we were able to close 27 PRs and issues. All this was possible because of our community, more than 40 people have helped in 1.10. Thank you all! 😉

Let's dive into a few highlights.

Cordova Update

Meteor is now up-to-date with Cordova; we have updated from cordova-lib 7 to 9 and also cordova-ios and cordova-android to latest versions. Also, we’ve upgraded every Cordova plugin that is a direct dependency of Meteor.

As a result of these updates, the problems reported by XCode due to old Swift versions are gone and also the warnings after the submission to the App Store about using UIWebView. As always you can check everything that was updated in History.

The Cordova integration is very important for many Meteor developers that are delivering their apps or their client’s app to App Store and Google Play. We are now able again to provide a smooth experience for developers creating a native application only using Javascript.

You can create a new Meteor application with native support via Cordova by running:

meteor create my-mobile-app
cd my-mobile-app
meteor add-platform ios
meteor run ios

meteor run ios will open the iOS Simulator with your app running on it. You can also run Android by running:

meteor add-platform android
meteor run android

meteor run android will run your app in the Android Simulator as well.

If you don’t have iOS or Android development kits setup yet, follow the steps from our guide before adding the platforms to your Meteor app.

Cordova still has a lot of presence on App Store and Google Play, and Meteor can help a lot with the native experience by providing a Cordova project already configured properly for you.

In my opinion, Cordova deliveries the best cost-benefit for companies that want to have their apps on Web, iOS, and Android. We will continue to provide support for Cordova and we are also going to enhance the documentation and include more code examples on how to build great native apps. 📱

MongoDB Update

As you probably know Meteor has a long story with MongoDB — Meteor even provides a MongoDB ready to be used by your application without requiring that you install MongoDB yourself. This embedded MongoDB for development is now using the version 4.2.1.

We have also updated the MongoDB driver used by core Meteor packages so we are up-to-date with MongoDB as well. 🎉

Thanks Christian Klaussner for this work!

Skeleton Updates

You can create a new Meteor project choosing from a few skeleton options, but the React skeleton was still using class components and withTracker HOC, these two patterns are still valid but we believe there are better ways to create React apps today. It was time for an update here. Now, it uses function components and the new hook for tracker called useTracker.

If this hook is new to you, check our recent blog post introducing it. See below how it is used in the updated skeleton — useTracker makes it very simple to have reactive data in your React components!

You can use this new skeleton running meteor create --react. The TypeScript skeleton (meteor create --typescript) also uses React, and therefore it is also updated with function components and useTracker hook.

On the subject of skeletons, a new skeleton is coming soon: the new skeleton (not published yet) will help you to create a native app with Cordova, Push Notification, PWA settings, Service Worker and much more. Sign-up to our newsletter to know when the mobile skeleton is available! 💀

Vue.js Tutorial

If you are not using React as your view layer, there is a good chance that you are using Vue.js. We are glad to announce our Vue.js Tutorial!

In the tutorial, you are going to learn how to create a simple app to manage a “to do” list and collaborate with others on those tasks. By the end, you should have a basic understanding of Meteor and how to use Vue.js with Meteor. Feedback is welcome!

Thanks to Brian Mulhall who wrote this tutorial and also Guillaume Chau who implemented Meteor akryum:vue-component package.

Exclude Architectures

Meteor 1.7 introduced a new client bundle called web.browser.legacy in addition to the web.browser (modern) and web.cordova bundles. Naturally, this extra bundle increased client (re)build times. Since developers spend most of their time testing the modern bundle in development, and the legacy bundle mostly provides a safe fallback in production, Meteor 1.8 cleverly postpones building the legacy bundle until just after the development server restarts, so that development can continue as soon as the modern bundle has finished building. This was nice, but not enough, as the web.browser.legacy is still using machine resources even if it’s not blocking the modern bundle to be used but now this is solved.

You can now pass an --exclude-archs option to the meteor run and meteor test commands to temporarily disable building certain web architectures saving machine resources. For example, meteor run --exclude-archs web.browser.legacy. Multiple architectures should be separated by commas. This option can be used to improve (re)build times if you’re not actively testing the excluded architectures during development.

As you can see below you can optimize your development excluding architectures that are not important for you in a specific moment.

Thanks Seba Kerckhof 😃

If you want to update an existing Meteor project you can update to 1.10.1 running meteor update on your app directory. Enjoy!

Meteor DevTools Evolved

Leonardo Venturini published a new version of the Meteor DevTools that he called Meteor DevTools Evolved, an incredible tool for Meteor developers to debug and understand Meteor methods and publications. Also, it provides a view of your MiniMongo collections.

This new DevTools is capable of handling a lot of DDP messages per second without freezing or breaking, and also offers new features like save messages to analyze later (bookmarks), MiniMongo documents filter, etc. If you would like to contribute or if you found a problem feel free to open an issue or PR. ⚙️

Galaxy News

Galaxy also received a new feature today! One of the most requested features on Galaxy was the ability to edit the Meteor settings without requiring a new code deploy. We are glad to announce that now you can edit the settings from the current version of your app deployed to Galaxy.

It's very simple — go to Versions tab in your Galaxy app dashboard, expand your current version and click in the Edit button below your current settings then a text input will appear for you to edit the settings. Click save when you are ready and a new version will be created with your changed settings. ✏️

In case you have missed, Galaxy is offering a free trial of 30 days! You can use up to 4 GBs of RAM, which is the same as 4 standard containers, 2 double containers or 1 quad, so you can try all the Galaxy container sizes for free. Sign-up for Galaxy now! 🆓

Wow, many things to cover in this post, I hope you liked it. Check the Meteor and Galaxy roadmaps to know what is coming next! 😉

Meteor 1.9 (Node.js 12) and new Roadmaps

Filipe Névola — Fri, 31 Jan 2020 15:46:31 +0000

Today we’re thrilled to announce the final release of Meteor 1.9, which brings the stable and in long-term support Node.js 12. We also have a new version of Meteor roadmap and the first Galaxy public roadmap. Please check those out when you can so you know what’s to come! We’re very excited, and we hope you are too.

Node.js 12

The major change with 1.9 release is Node.js 12 support. In April of 2019 we started to publish alpha versions of Meteor 1.9 updating to Node 12; with continual feedback from the community members, we are now ready with a final version.

The upgrade from Node 8 to Node 12 required a number of changes and updates behind the scenes to ensure the compatibility of npm packages. As always, Meteor updates are backward compatible as possible and you can enjoy the benefits of new features without any hassle!

The new version of the V8 JavaScript engine used by Node 12 brings performance improvements and tweaks that should improve the performance of your code as a whole. Meteor uses Fibers to avoid async callbacks and now you should see less garbage collection as node-fibers is no longer asking for adjustments of external allocated memory what should result in less pressure in CPU usage what is always good.

It is worth to note that 32-bit Linux support was dropped in Node.js 10, and we also dropped the support for it. In other words: Meteor 1.9 supports 64-bit Mac, Windows, and Linux, as well as 32-bit Windows. As always you can check all the changes in History.

We are also excited about new Node features that will be beneficial for the future of Meteor. Worker Threads that can help to parallelize build process and other intensive processes and also native source map support for Node stack traces.

Before you update to Meteor 1.9 we recommend you check your npm dependencies to be sure they are compatible with Node 12.

Meteor Roadmap

We’ve updated the Meteor roadmap to reflect our goals for Meteor, and we hope you will review and share your thoughts. We will continue to update every quarter. There are many different areas for contributions for those interested: Core, Cordova, DB, Documentation, as well as new content for Technologies that we consider first-class citizens in the platform.

We would love to have you involved! Meteor has and will continue to rely on our community in order for us to grow into the platform we all know it can be. We hope that you will help us make Meteor better by assigning yourself a task.

Everybody is qualified to work on Meteor, if you need help deciding the best item for you to be involved leave a comment here or ask in the Meteor Community Slack.

You can also get involved in Meteor 1.10 which includes Cordova updates and also the ability to disable web.browser.legacy build, we already have published beta versions of it and you can help trying it in your apps today.

Galaxy Roadmap

Galaxy is the hosting platform specially designed for Meteor apps. It’s the fastest way for you to publish your Meteor apps: One command deploys, free Automatic SSL certificates, built-in SEO prerendering, integrated APM, etc.

Galaxy already provides many features to make your experience running Meteor apps in production as easy as possible; in the next few months it will receive new features such as: notifications about your app activities, auto-scale options, ability to apply new settings without a new deploy and much more.

If you have special needs or want support feel free to send us a message (support@meteor.com) and we will be glad to help.

Packages updates

Every week we have package updates and since Meteor 1.8.2 we had many updates, a few highlights:

meteor-apm-agent@3.2.5: fixes error logs not providing useful information [object Object].

mdg:seo@3.2.2: removes deprecated tag and updates prerender-node.

modern-browsers@0.1.5: fixes Capacitor (and possibly others) user agents detection.

react-meteor-data@2.0.1: makes main module lazy.

By the way, Kevin Newman published a great post about version 2 of react-meteor-data package where he explains how useTracker (new React hook!) works and how to use it.

Bonus Tip

To conclude this post I would like to ask you a question: Did you know you can use optional chaining since Meteor 1.8.2? 😮

Yes, you can! Thanks to the great integration between Meteor and Babel you can already use optional chaining without any extra configuration. Optional chaining is great to avoid explicit undefined checks in your code. See one simple example:

// author / coauthor (optional) / title
const blogPost = {
  author: {
    firstName: 'Filipe',
  }  
  title: 'Meteor 1.9 and Node.js 12',
}
// get coauthor first name without optional chaining
if (blogPost.coauthor) {
  console.log(blogPost.coauthor.firstName);
}
// get coauthor first name with optional chaining
console.log(blogPost.coauthor?.firstName);
// output: undefined

You can check all the proposals available for you in babel-preset-meteor and don’t forget to update your apps to Meteor 1.9. Enjoy!