Hey there, fellow dev! If you work with Liferay, buckle up because I'm about to tell you how version 7.4 completely changed the game. You know that feeling when someone finally gets what we actually need? That's exactly what I felt when I started working with these new tools.

I'll be straight with you: frontend development in Liferay will never be the same. And that's AWESOME!

Blade CLI: The Swiss Army Knife That Evolved into a Lightsaber

Remember when Blade was just that little code generator that created portlets? Forget about it! This thing is on another level now. Today, when you type:

blade create -t client-extension-react my-awesome-component

You're not creating those heavy old-school portlets anymore. You're creating actual micro-frontends that live their own lives, with their own deployment cycles. It's like going from a '72 Beetle to a Tesla.

What Really Changed?

Hot-reload that actually works: That torture of waiting 5 minutes to see if the button turned blue or red? Gone. Change it, save it, BAM! It's there on your screen.

Integrated NPM: Want to use that cool lib that came out yesterday? npm install and be happy. No hacks, no workarounds.

Turbocharged local development: Run everything locally, test everything locally, only push to the server when it's perfect.

I literally save about 2 hours a day just by not having to deploy to test every little thing. Seriously, do the math on what that means in a month!

Client Extensions: Bye Bye, Problematic Shared Libraries!

OK, this is the part that gets me most excited. Client Extensions are like those old shared libraries, but on steroids. It's code sharing done right.

Why This is Revolutionary

Picture this: you have an extension running React 18 with the latest TypeScript. Your colleague has another one using Vue 3. In the old days? Conflict for sure. Today? Each one in their own sandbox, everybody's happy.

And the best part: deploy without breaking anything. That's right. Update the extension, deploy it, and the portal doesn't even blink. It's like changing tires while the car is moving (but in a safe way, of course).

In Practice, How Does It Look?

// client-extension.yaml
my-awesome-analytics:
  type: themeJS
  urls:
    - js/analytics-that-works.js

products-catalog-2025:
  type: customElement
  urls:
    - js/catalog.js
  cssURLs:
    - css/stylish-catalog.css
  friendlyURLMapping: products

Simple as that. Declare what you want, where the code is, and Liferay makes the magic happen.

Real Cases That Saved My Day

External service integration: Needed to integrate with a new payments API. Created a Client Extension, developed everything in isolation, tested until perfect. Deploy? 30 seconds. Zero downtime.

Actually reusable components: Created a cool charts component in an extension. Now I use it in 5 different projects. Copy and paste? Never again!

Lexicon/Clay: The Design System That Makes Sense

I'll confess something: I was skeptical about design systems. "Oh, it's gonna make everything rigid," I thought. My friend, how wrong I was!

Lexicon/Clay isn't just a pretty library. It's a complete arsenal that saves you from reinventing the wheel every single day.

Performance You Can Feel

You know when the client complains the site is slow? With Clay, this problem shrinks A LOT. Why?

• Reduced bundle size: Everyone uses the same components = less JavaScript to download
• Optimized CSS: CSS variables work miracles. Changed the primary color? Changes EVERYTHING without reloading
• Smart caching: The browser loves it when you use the same stuff. Load once, use forever

Consistency That Users Thank You For

It's not just about pretty code. It's about happy users. With Clay:

• Free accessibility: All components come with ARIA labels, keyboard navigation, everything done right
• Predictable behavior: User learns once how a modal works, and all modals work the same
• Effortless responsive: Works on desktop, tablet, grandma's phone. All automatic

Code That Makes Sense

import {ClayButton, ClayModal} from '@clayui/core';
import {useLiferay} from '@liferay/frontend-js-react-web';

function MyAwesomeComponent() {
  const [showModal, setShowModal] = useState(false);

  return (
    <>
      <ClayButton 
        displayType="primary"
        onClick={() => setShowModal(true)}
      >
        Click me!
      </ClayButton>

      {showModal && (
        <ClayModal
          observer={observer}
          size="lg"
        >
          <ClayModal.Header>
            Look how cool!
          </ClayModal.Header>
          <ClayModal.Body>
            Beautiful, functional, and accessible component.
            No extra effort!
          </ClayModal.Body>
        </ClayModal>
      )}
    </>
  );
}

Clean, clear, and works anywhere in Liferay. That's what I call productivity!

Stylebooks: Customization Without Headaches

Here's a truth: clients love changing colors. "Oh, this blue is too blue, can you make it more light-blue?"

In the old days? Nightmare. Today? Stylebooks!

How Does This Magic Work?

Stylebooks are like themes on steroids. You define design variables (colors, spacing, shadows) and they propagate to EVERYTHING. Even your Client Extensions automatically get these variables.

/* Your CSS in Client Extensions */
.my-special-card {
  background: var(--primary-background);
  border-radius: var(--border-radius-default);
  padding: var(--spacing-medium);
  /* Gets everything from Stylebook! */
}

Client wants to change the primary color? Go to Stylebook, change it there, and BOOM! Entire site updated. No deploy, no compiling anything.

Power in the Client's Hands (But Controlled)

The best thing about Stylebooks is that you, the dev, set the limits. The client can change colors, fonts, spacing... but within what makes sense. No more "the client broke the layout because they touched where they shouldn't."

Putting It All Together: The Dream Workflow

Now comes the coolest part. When you combine all these tools, development goes like this:

1. Create the project with Blade: blade create and you already have the structure ready
2. Develop with Client Extensions: Isolated, testable, reusable code
3. Use Clay Components: Consistent and beautiful interface without effort
4. Stylebooks to customize: Happy client, happy you, everybody happy

A Real Day in the Life

Just yesterday, I needed to create a new dashboard. Process:

• 9am: blade create -t client-extension-react sales-dashboard
• 9:30am: Already had the base components working with Clay
• 11am: Complete dashboard, with charts, tables, all responsive
• 11:30am: Deploy via Client Extension (30 seconds!)
• 2pm: Client asked to change the colors. Stylebook. 5 minutes.
• 2:05pm: Having coffee ☕

In the old days? Would easily take 3 days.

Tips from Someone in the Trenches

Start Small

Don't try to migrate everything at once. Take one component, turn it into a Client Extension, watch the magic happen.

Embrace Clay

Resist the temptation to create your own components. Clay has almost everything you need, and what it has is tested, optimized, and accessible.

Stylebooks from the Start

Even if the client doesn't ask for it, set up Stylebooks. Trust me, at some point they'll want to change something.

Documentation is Your Friend

Liferay's docs have improved A LOT. And the community on Slack is super active. Don't be shy about asking questions.

The Future is Now

Folks, I won't lie: migrating to this new model takes a bit of initial work. But the payoff is huge. Faster development, cleaner code, safer deploys, happier clients.

If you're still developing old-school portlets, it's time to evolve. Liferay 7.4 isn't just a version update - it's a paradigm shift.

And the best part: the learning curve isn't as steep as it seems. In two weeks you'll be flying with the new tools.

Conclusion: Is It Worth It?

1000% yes! The combination of Blade CLI + Client Extensions + Clay completely changed my productivity (and mental sanity).

What used to be complex and time-consuming is now simple and fast. What used to be "hope it works" is now "it works and I know why."

If you develop in Liferay, there's no excuse not to dive into these technologies. Your future self will thank you - and so will your clients!

Let's code? 🚀

PS: If you're already using these tools, share your experiences! And if you're not yet, how about starting today? The Liferay community is here to help!