DEV Community: AppMap Ruby

How to spot and fix Django ORM anti-patterns

AppMap Ruby — Tue, 13 Apr 2021 10:32:59 +0000

A demonstration of how to optimize Django ORM by seeing how it makes SQL queries under the hood.

I use the open source AppMap extension for Visual Studio Code to record the code and SQL execution of an application test case, and then display that information as a graphical execution trace.

The graphical display of code and SQL shows how the ORM works behind the scenes.

Onboarding to a new codebase quickly and efficiently

AppMap Ruby — Thu, 08 Apr 2021 11:17:47 +0000

A short demonstration of how to use AppMaps to shorten the time it takes to get productive on a new-to-you codebase.

I use the open source extension for VS Code called AppMap, and the ecommerce Rails application Solidus as an example.

AppMap works by recording the code execution paths of your app. A good way to create AppMaps is by recording unit, functional or integration test cases.

To check it out search for 'AppMap' in the VS Code extensions tab or in the VS Code marketplace.

Find the N+1 Query Problem in Rails Apps in Under 5 Mins

AppMap Ruby — Fri, 02 Apr 2021 21:57:20 +0000

This video is based on the brilliant Eager Loading and the N+1 Query Problem blog post by Kevin Gilpin.

It is a short demonstration of how to identify the N+1 Query anti-pattern using the AppMap extension for VS Code, jq and the Rails Sample Application Sixth Edition as an example.

The N+1 anti-pattern happens when a query is executed for every result of a previous query. If left unchecked N+1 queries result in a gradual slowdown in the performance of an application.

Detecting N+1 queries is tricky, because they are not revealed by any mainstream testing strategy.

To detect the N+1 query problems we need to look at the number of SQL queries that are performed in a realistic situation, such as an integration test, and compare this number with a “reasonable” expectation.

You can find full usage instructions, and all these links, on the AppMap page in the VSCode marketplace.

Thanks for watching!

Ruby Giant - Amir Rajan, Creator of DragonRuby

AppMap Ruby — Fri, 26 Feb 2021 16:58:01 +0000

If you’ve been around the indie games community for a few years, you’ve probably heard of Amir Rajan. He’s a game developer and the creator of the DragonRuby Game Development Toolkit . The story of how he made and promoted the hit mobile version of A Dark Room is legendary.

In addition to being a smart, driven creator Amir is generous when it comes to helping others learn from his experience.

My team at AppLand recently started an open source project for the Ruby community. We have a great deal of respect for Amir’s approach so I reached out for some inspiration and advice on making the next generation of tools for Ruby developers.

It seems like people with artistic sensibilities are drawn to Ruby. Why did you choose it initially and why did you stick with it?

Amir: I'd like to say dynamic languages are forgiving in nature. It feels like working with charcoal and oils. While static languages feel like you're working with marble. With respect to video games, Ruby is perfect given that game dev is an artistic medium. In essence: I'm not sure what I'm building yet, games are made of the stuff of dreams... having a static compiler asking my "what are you trying to build?" - at the inception of an idea - just ends up getting in the way.

Social awareness seems to be woven into the DragonRuby business model and it almost feels like a FOSS sensibility is lurking under the surface. Did you consider making the platform open source?

Amir: We can't open source all of the platform because of console/mobile-specific NDAs. But what we are able to open source is located at dragonruby-game-toolkit-contrib. With regards to FOSS, the DragonRuby partnership is trying to define a more sustainable software model. The OSS landscape as it stands today is definitely not sustainable. Lots of burnout, with multi-billion dollar companies profiting without giving much in return.

Generally speaking, we take the stance that: "If you are gainfully employed, then you will pay for this software in full. If you can't afford to, however, then don't worry, we'll give it to you for free."

DragonRuby's Discord game is very high. It seems like you’re investing there. How important is Discord in getting a new developer-focused company off the ground? Any tips for nurturing a healthy Discord community?

Amir: Community is very important especially for a young product. Small companies have to be personal and candid. It's the one competitive advantage we have over the larger (soulless) players in the market. The only tip I really have is to just be genuine and present within the community.

The Nokia 3310 Jam was kind of genius and it produced some really interesting projects. Was that your idea? How did you get involved?

Amir: I always keep an eye on game jams hosted on itch.io that DragonRuby Game Toolkit would be a good candidate for. After I find one, I just reach out to the organizer and ask to sponsor. They are usually happy to oblige.

DragonRuby feels very approachable to me. What level of Ruby dev skills do you need to be productive with DragonRuby? Where is the best place for people to start their DragonRuby journey?

Amir: You don't need to know much Ruby at all to get started really. You can play around with the engine in the web browser via fiddle.dragonruby.org. The docs have a good starting tutorial too. There are over 50 sample apps that are included in the downloaded that cover various aspects of the engine and video game genres. And of course, I'm always available in the Discord channel to help out. People really love this tutorial on building Tetris that Ryan created, too.

P.S.

My team at AppLand makes a VS Code extension that creates software design diagrams automatically in your IDE. The visual interface we created for the plug-in was influenced by game design tools.

Install it for free from VS Code Marketplace

( or just search for appmap in VS Code )

This is the first in a series of posts that highlight developers doing interesting or unexpected things with Ruby. I’m calling it…

Comment here or DM me on Twitter if you know of a project that should be featured.

You’ve read this far so I know you’re thinking, “I wonder if I could use DragonRuby to build a game like…”

Comment with your vote for all-time best 2D game!

Startups can still feel good about choosing Bootstrap in 2021

AppMap Ruby — Wed, 17 Feb 2021 01:31:46 +0000

I don’t remember how or when I first encountered Bootstrap, but I do remember a late night in 2012 during which I ripped all the Blueprint CSS out of my company's product and replaced it with Bootstrap. The company was an early-stage startup, the product was a SaaS application, and Boostrap was a completely new thing. The next morning at standup I took some extra time and walked my team through what I had done. I got applause. Literally. People clapped. That was a first for me.

Needless to say, in 2021 the applause has died down when it comes to choosing Bootstrap. The introduction of Bootstrap for early product development must now be accompanied by a thoughtful argument. Many developers (especially the kind that join early-stage startups) now regard Bootstrap as the Toyota Camry of front end frameworks, and jQuery as the dead-dinosaur-fueled combustion engine under the hood. I am here to tell you that this battle-hardened framework makes more sense now than it ever has for early product development.

BLOAT seems to be the major category of concern. Doesn’t Bootstrap have performance issues? What about all those verbose, extraneous class names?

The concern is justified, but there are some very particular things you need when building the first iterations of a web UI that Bootstrap is particularly well suited for.

Incredibly low activation energy, Incredibly high speed of iteration

Bootstrap is available on-demand, usable in seconds, and there is no faster way to get a web app UI up and running with a complete, documented design system.

As Kevin Gilpin, founder of multiple successful startups points out in this post in the early-stage startup game ‘speed’ is measured in how quickly, and cost-effectively you achieve goals. When it comes to building web UI this translates to getting the UI live and iterating on layout, control selection, and user flow until you have something people want to use.

If you are successful at shipping product, providing value, and retaining users, there may be a point when shaving milliseconds off your load time matters. It won’t be on day one, and if you are doing it right, the thing straining your app’s performance is directly related to your core innovation, not serving commodity UI.

Complete and accessible documentation that anyone can understand

Bootstrap controls are well documented, both in their official documentation and across the various support communities. This is a benefit that scales out to every member of your extended development team and enables the UI implementation to scale.

As soon as your app has two developers working on it, or two similar but different views, or two modes, or two of anything really, you need a system for maintaining consistency across the visual and interaction design.

Creating and maintaining reference implementations for UI controls is extraordinarily expensive in terms of developer time, and easily falls out of step with product direction. Having those resources pre-baked frees up developers and designers to focus on higher-order problems and keeps the UI development process agile.

Corollary: If it’s not in the Bootstrap docs, reconsider your control selection.

Redundancy in the naming of classes is a quality of CSS not Bootstrap

Good CSS class naming conventions are logical, intuitive, concise, maintainable, accurate, and have decipherable relationships to other class names. But their MOST important quality is making the object they describe look and act as intended. Being DRY is not high on the list of concerns, especially during the rapid prototyping and early product development cycles. This can make developers that do not live on the front end bristle when they see things like...

class=”btn btn-primary btn-lg”

In the back of their mind, they know there are ways to identify and scope elements that do not require this naive style of tagging and inheritance.

The ugly truth is that about one minute after the need to write CSS arises, the need for a class naming convention arises. About five minutes after that the decision gets made that adding a few extra characters is a small price to pay to get an object to look and act the way you want it to. It is a very short drive from there to a place where btn btn-primary btn-lg looks downright tiny.

Hasn’t the world moved on from Bootstrap?

No, not yet. Bootstrap is a mature platform with wide adoption. It is a part of many applications running in production. As you can probably tell, I find it to be ideally suited for 0-1 front-end development for web applications.

There is a practical derivation of this question, however, which is "Should Bootstrap be on my resume?" The short answer to that is “no.” Bootstrap experience doesn’t belong on a resume and it never has. It’s like putting "Google Docs skillz" instead of "copywriting." CSS is the line item you want.

Okay, I’m cutting myself off here...

I guess I had a lot to say about Bootstrap. More than I thought. Comment below or hit me up on Twitter if you want keep going. I could easily do a part two.

If you are a Ruby developer please check out appmap-ruby. It is an open source extension that creates interactive visualizations directly from Ruby apps.

There are things about whiteboards that I don't miss

AppMap Ruby — Fri, 12 Feb 2021 04:34:44 +0000

Attempting to drag whiteboard drawings into our remote workflow exposed how they had been slowing us down.

Sure, creating a whiteboard drawing can be fun and effective

A good visual explanation doesn't require an accurate diagram, it requires a diagram that is inaccurate in useful ways. This is where whiteboard sessions shine. A good whiteboard diagram has very few real-world constraints, or cluttering details. The process itself is a satisfying way to create real alignment.

That's great, but how do capture and share that experience in the Covid era? Pasting snapshots of whiteboards into Slack was always janky.

If all you need to do is rally co-workers, then you can probably get by with the existing collaborative drawing platforms.

In December I spoke with a Senior Engineer at a systems integrator in Cambridge, MA who told me that moving from onsite whiteboards to online Hoylu whiteboards drastically improved her team's design collaboration with clients.

If you are using diagrams to communicate critical design decisions, however, then a shared drawing board isn't going to be enough, because...

Working from someone else's whiteboard drawing is not very fun or effective.

When trying to understand code or a complex system from a diagram, accuracy counts. Completeness counts. The visual model needs to hold together under scrutiny, even when the author or team of authors is not available.

Whiteboard diagrams could never be treated as a spec. This is primarily because code entity relationships and control flow are notoriously hard things to depict visually. Getting a diagram correct to the point where a new employee can use it to understand existing code, or a co-worker can help you untangle an auth flow requires discipline and deeper tooling.

If you are willing to put in the work, there are some tools for leveling up diagram quality.

Plant UML - A diagramming syntax for generating UML diagrams
Mermaid JS - A diagramming syntax for generating various types of technical diagrams online editor
Draw.io - Online diagram drawing app Free but not open source (disclaimer: I have not actually used this app but many people do.)
C4 Model - An architectural rendering framework for creating diagrams with understandable context

The thing is, once you leave the whiteboard behind, and the fidelity of the diagram increases, expectations go up. You start to ask and get questions like:

Can I zoom in?
Can I see a previous version?
What does it look like running?
What exactly does that arrow between the two boxes mean?

When the pressure is on, creating or consuming a whiteboard drawing is just painful

Tracking down a not-obvious bug, preparing for a detailed review, or defending a design decision means you need to present the code 'as-built.' In these situations, tolerance for developer interpretation is very low. People are less interested in seeing a depiction of what you 'think' is going on, and very interested in understanding the reality of the code.

This definitely requires a more sophisticated tool, one that can record running code, as-built, on-demand, then create an interactive depiction in a sharable form factor.

My team built our own tooling to do just that. It is available as an open source project. If you are Ruby developer feel free to check out our VS Code extension.

Or check out these posts to see how we have been using it.

At this point, it is unbelievable to me that we once reached for an Expo marker in these cases.

How Pro Ruby Developers Customize VS Code

AppMap Ruby — Tue, 09 Feb 2021 23:15:41 +0000

I recently asked twenty-five professional, freelance Ruby developers about their favorite extensions for Visual Studio Code.

This wasn't a formal survey, just a way to dig into what makes for a great VS Code extension and use that to inform the design of our own AppMap extension.

I tallied the results and a clear picture emerged about which extensions were top of mind for Ruby developers.

The most popular responses

These are the heavyweights. No big surprises, but it was interesting to see these names appear with such consistency.

Rubocop - A VS Code interface for the Rubocop static code analyzer.
ESLint - JavaScript Linter. With close to thirteen million downloads, we are all well aware of this one.
Prettier - Text formatter.
Ruby - Provides enhanced Ruby support specific to VS Code.
GitLens - Provides enhanced Git support specific to VS Code.

There was a dropoff and the results got more varied

These extensions are not necessarily less popular in terms of sheer download numbers. They were just not top of mind for these developers. Part of being a great extension is seamlessly blending into and improving an existing workflow. Consequently, some of the best extensions are nearly invisible and rarely thought about.

ERB Formatter - Provides syntax formatting for ERB.
Intellicode - AI-assisted development for Java, C#, Python, and a handful of other languages, but not Ruby.
Docker - A VS Code interface for managing containers.
Ruby Solargraph - Provides code completion and inline docs for Ruby.
Live Share - Enables real-time collaborative coding.

Incredibly useful extensions that are not new but were new to me

These are two extensions that I discovered during this exercise and added to my own toolkit. I was definitely late to the party on these, but happy to have them now.

CSS Peek - Jump directly to CSS definitions from an id or class name in HTML.
Todo highlight - Highlight TODO in your code.

The obscure indie

Simple but so useful.

Rails Routes - Jump to a route definition from wherever it is being called in the code

One well-known developer responded to my question by pasting his plugins.json file into a DM. It actually ended up being interesting to pick through. Kind of like watching the credits of a movie. Check it out.

If you have any extensions that you really like and think would be useful to a Ruby developer, please comment.

The raw data

Extension	Developer	Mentions
Rubocop	Misogi	9
Prettier	Prettier	9
ESlint	Dirk Baeumer	8
VSCode Ruby	Stafford Bunk	8
Ruby	Peng Lv	7
GitLens	Eric Amodio	6
ERB Formatter	Ali Ariff	3
Intellicode	Microsoft	3
Docker	Microsoft	3
Solargraph	Castwide	3
Live Share	Microsoft	3
ERB	Craig Maslowski	3
Live Server	Ritwick Dey	2
Bracket Pair Colorizer	CoenraadS	2
Auto Close Tag	Jun Han	2
vetur	Pine Wu	2
JS Code Snippets	charalampos karypidis	2
Peacock	John Papa	2
Stylelint	Stylelint	1
Boostrap 4 snippets	Zaczero	1
Bootstrap 4, Font Awesome	Ashok Koyi	1
Pro Snippets	uncprocore	1
Redux DevTools 8	Jingkai	1
Auto Rename Tag	Jun han	1
Error Lens	Alexander	1
Live Server	Street Side Software	1
Rails Go To Spec	Sporto	1
Better TOML	Bung cip	1
VS Code Elixir	Matt McLoughlin	1
Better HAML	Karuna Murti	1
VS Code PDF	tomoki1207	1
Add New Line To Files	Jeremy Forsythe	1
CSS Peek	Pranay Prakash	1
Rest Client	Huachao Mao	1
Ruby Linter	Cody hoover	1
Simple Ruby ERB	Victor Ortiz Heredia	1
Trailing Spaces	Shardul Mahadik	1
VS Code Database	Bajdzis	1
Todo Highlight	Wayou Liu	1
Endwise	Kai Wood	1
Gem Lense	ninoseki	1
Rails Routes	aki77	1