DEV Community

Cover image for AI, Cursor, Verbosity and Meteor without frontend frameworks
Filipe Névola for Quave

Posted on

AI, Cursor, Verbosity and Meteor without frontend frameworks

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);
  });
});

Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)