UI (Liferay), Developer

📍 Job Overview

Job Title: UI (Liferay), Developer

Company: Adree

Location: Riyadh, Riyadh Province, Saudi Arabia

Job Type: Full-Time

Category: Front-End Development / Portal Development

Date Posted: August 03, 2026

Experience Level: Mid-Level (2-5 years)

Remote Status: On-site

🚀 Role Summary

• Develop and optimize enterprise portal interfaces and digital web experiences using the Liferay DXP platform.

• Translate UI/UX wireframes and business requirements into responsive, high-performance Liferay themes, layout templates, fragments, and front-end portlets.

• Ensure seamless user experiences, visual consistency, and optimal performance across all enterprise digital solutions.

• Operate at the intersection of enterprise portal architecture and modern front-end engineering.

📝 Enhancement Note: This role is specifically for a Liferay DXP focused UI Developer, indicating a need for deep expertise in Liferay's proprietary theming and component architecture, rather than a general front-end role. The emphasis on "enterprise portal interfaces" suggests a B2B or internal-facing application context.

📈 Primary Responsibilities

• Liferay UI Implementation: Design, customize, and implement Liferay DXP themes, layout templates, site initializers, and UI fragments using Liferay’s Client Extensions and Clay Design System.

• Front-End Development: Develop responsive, interactive, and accessible web interfaces using modern front-end technologies (HTML5, CSS3/SASS, JavaScript, ES6) and potentially frameworks like React or Angular within the Liferay environment.

• Component & Template Design: Build reusable UI components, custom Freemarker templates, and Asset Publisher Display Templates (ADTs) to enforce design consistency across portal sites.

• Integration & API Consumption: Bind front-end UI components with Liferay REST APIs, GraphQL, and backend headless services to render dynamic portal content efficiently.

• Design System & UX Compliance: Collaborate closely with UI/UX Designers to translate Figma/Adobe XD mockups into pixel-perfect, cross-browser, and mobile-responsive Liferay pages.

• Performance Tuning: Optimize portal front-end performance, page load times, client-side caching, and DOM rendering across various browsers and devices.

• Collaboration & Support: Work with Java/Liferay backend developers, Business Analysts, and QA teams to integrate, test, and troubleshoot UI components throughout the Agile lifecycle.

📝 Enhancement Note: The responsibilities clearly outline a specialized role focused on the Liferay ecosystem. The emphasis on "Client Extensions" and "Clay Design System" points to Liferay 7.x and later versions. The need to integrate with "Liferay REST APIs, GraphQL, and backend headless services" highlights the modern architectural patterns expected.

🎓 Skills & Qualifications

Education:

• Bachelor’s degree in Computer Science, Information Technology, Software Engineering, or a related field. Experience:

• 3–5 years of experience in Front-End Web Development.

• At least 2+ years of dedicated experience developing UI for Liferay DXP (specifically 7.x / Enterprise editions).

• A solid track record of delivering responsive enterprise portal interfaces and custom Liferay themes. Required Skills:

• Liferay Ecosystem Mastery: Hands-on expertise with Liferay DXP theme development, Freemarker templating, Clay UI framework, Liferay Fragments, and Client Extensions.

• Core Front-End Tech: Advanced proficiency in HTML5, CSS3, SASS/LESS, JavaScript (Vanilla/ES6+), and foundational CSS frameworks like Bootstrap/Clay CSS.

• Modern JS Frameworks: Good understanding and practical experience with React.js or Angular/Vue.js for building modern Liferay front-end widgets.

• Headless & APIs: Experience consuming RESTful APIs, JSON, and GraphQL within Liferay applications to fetch and display dynamic content.

• Design Tool Integration: Comfort and proficiency in working directly from design artifacts provided by tools like Figma, Zeplin, or Adobe XD.

• Version Control & Build Tools: Proficiency in Git for source code management, and experience with build tools such as npm and webpack. Familiarity with Liferay Developer Studio or Blade CLI is also crucial.

• Problem Solving & Precision: Strong attention to detail, with a keen eye for typography, spacing, visual hierarchy, and ensuring cross-browser/cross-device compatibility.

Preferred Skills:

• Familiarity with Liferay Headless architecture and Liferay Objects UI extension.

• Basic understanding of Java/JSP for potential legacy Liferay customization or deeper integration needs.

• Exposure to Web Accessibility Standards (WCAG 2.1) and best practices for inclusive design. Certifications:

• Liferay Front-End Developer Certification (Highly Preferred).

📝 Enhancement Note: The "Preferred Skills" section indicates a leaning towards modern Liferay development practices, with Headless architecture and Objects UI being valuable additions. The mention of Java/JSP, while preferred, suggests that the core focus is on the front-end Liferay stack. WCAG certification is a strong indicator of the company's commitment to accessibility.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• Demonstrated Liferay Projects: A portfolio showcasing specific projects built using Liferay DXP, highlighting custom themes, layout templates, and UI fragments.

• Responsive Design Examples: Clear examples of how your work adapts seamlessly across various devices (desktop, tablet, mobile) and browsers.

• Component Reusability: Showcase of reusable UI components and design patterns implemented within Liferay or similar enterprise portal environments.

• API Integration Case Studies: Examples of front-end components that successfully integrated with backend APIs (REST/GraphQL) to display dynamic data.

Process Documentation:

• Workflow Design & Optimization: Evidence of contributions to designing or optimizing front-end development workflows within an Agile or similar development methodology.

• Implementation & Automation: Examples of how you've implemented front-end solutions efficiently, potentially using build tools or scripting for automation.

• Performance Analysis & Improvement: Case studies demonstrating how you've analyzed and improved the front-end performance of Liferay portals or web applications.

📝 Enhancement Note: For a UI Developer role, the portfolio is critical. It should not just be a collection of links but should include concise case studies explaining the challenges, your solutions within the Liferay context, and the impact of your work, particularly concerning user experience and performance.

💵 Compensation & Benefits

Salary Range:

• Given the location (Riyadh, Saudi Arabia), experience level (Mid-Level, 2-5 years), and specialized skill set (Liferay DXP development), a competitive salary range for a UI (Liferay) Developer would typically fall between SAR 8,000 to SAR 15,000 per month. This range can vary significantly based on the specific employer, the exact scope of responsibilities, and the candidate's demonstrated expertise.

• Research Methodology: This estimate is based on general market data for experienced front-end developers in Saudi Arabia, adjusted upwards for the niche Liferay DXP expertise and the enterprise-level portal development requirements. Industry benchmarks for specialized IT roles in the Riyadh region were consulted.

Benefits:

• Client Site Assignment: The role is client-site based, implying potential for exposure to diverse enterprise environments.

• Professional Development: Opportunities for training and potentially Liferay certifications.

• Standard Benefits: Likely includes health insurance, paid time off, and other statutory benefits as per Saudi labor law.

• Career Growth: Potential to advance within front-end development or specialize further in Liferay DXP architecture.

Working Hours:

• Standard full-time working hours, likely around 40 hours per week.

• The role is on-site, requiring regular attendance at the client's location in Riyadh.

📝 Enhancement Note: Compensation for specialized roles like Liferay development can be higher than generic front-end roles. The "client site" nature of the work might also influence benefits or allowances, though this is not explicitly stated.

🎯 Team & Company Context

🏢 Company Culture

Industry:

• Adree operates within the Technology and Software sector, likely focusing on enterprise solutions, digital transformation, or IT consulting services. Their involvement with Liferay DXP suggests a focus on enterprise portal solutions, content management systems, and digital experience platforms for businesses. Company Size:

• Information on Adree's exact size is not provided, but Workable listings often come from small to medium-sized businesses (SMBs) or tech consultancies. This could mean a dynamic, hands-on environment where individual contributions are highly visible. Founded:

• Company founded date is not provided, but the presence on Workable suggests an active, growing company. Team Structure:

• Operations Team: While this role is for a UI Developer, it will likely interact closely with an operations or development team responsible for Liferay implementations. This team may include Liferay backend developers, system administrators, project managers, and business analysts.

• Reporting Structure: The UI Developer will likely report to a Development Lead, Technical Manager, or Project Manager overseeing the Liferay implementation project.

• Cross-functional Collaboration: Expect close collaboration with UI/UX designers, backend developers, QA testers, and business stakeholders to ensure the successful delivery of portal features and enhancements.

Methodology:

• The description mentions the "Agile lifecycle," indicating that the team likely follows Agile methodologies such as Scrum or Kanban for project development and delivery.

• Emphasis on translating design artifacts (Figma/Adobe XD) suggests a structured design-to-development process. Company Website:

• https://adree.com/

📝 Enhancement Note: The company's focus on Liferay DXP implies a specialization in enterprise content management and digital experience solutions. The "client site" aspect suggests Adree may be a consultancy or service provider, placing developers on projects for their clients.

📈 Career & Growth Analysis

Operations Career Level:

• This role is positioned as a Mid-Level UI Developer, requiring 3-5 years of experience with a specific focus on Liferay DXP. It's an individual contributor role focused on technical execution and implementation of UI designs within the Liferay platform. Reporting Structure:

• Typically, a UI Developer would report to a Senior Developer, Tech Lead, or Development Manager, who oversees the technical aspects of the project and guides the development team. Operations Impact:

• The UI Developer's impact is critical in shaping the user experience and front-end performance of enterprise portals. Successful implementation directly influences user adoption, customer satisfaction, and the overall effectiveness of the digital platform in achieving business objectives. This role contributes to the "front-end" of the operational efficiency of digital customer interactions. Growth Opportunities:

• Specialization: Deepen expertise in Liferay DXP, potentially moving towards Liferay Architect or Senior Liferay Developer roles.

• Technical Leadership: Progress to a Tech Lead or Development Lead position, guiding junior developers and overseeing technical delivery.

• Broader Front-End Expertise: Expand skills in other modern JavaScript frameworks or front-end architectural patterns.

• Full-Stack Potential: Gain exposure to Liferay backend development (Java/JSP) or other full-stack technologies.

• Consulting Expertise: If Adree is a consultancy, there's potential to grow into client-facing roles, solution architecture, or business analysis.

📝 Enhancement Note: The career path for a Liferay-specific developer is often tied to the Liferay ecosystem itself, with opportunities to become a subject matter expert. The "client site" arrangement could also offer exposure to various industries and business challenges, broadening the developer's experience.

🌐 Work Environment

Office Type:

• The role is described as "Client site," meaning the primary work environment will be at the physical location of Adree's client in Riyadh. This can vary from corporate offices to dedicated project spaces. Office Location(s):

• The primary work location is Riyadh, Saudi Arabia. Specific client site details would be provided upon engagement. Workspace Context:

• Collaborative Environment: Expect a team-oriented workspace, likely involving close proximity and regular interaction with other developers, designers, and project team members.

• Technology Access: Access to necessary development tools, Liferay environments, and client-specific systems will be provided.

• Operations Team Interaction: Daily stand-ups and regular project meetings will facilitate interaction with the broader Liferay project team.

Work Schedule:

• Standard full-time, on-site work schedule, likely Monday to Friday. Specific hours may be dictated by client requirements or company policy, but typically around 8 hours per day.

📝 Enhancement Note: Working on a client site means adapting to different office environments and potentially client-specific work cultures and schedules. This can be a valuable experience for understanding real-world enterprise IT deployments.

📄 Application & Portfolio Review Process

Interview Process:

• Initial Screening: A review of your resume and portfolio to assess alignment with Liferay DXP requirements and front-end development skills.

• Technical Interview: In-depth discussion covering Liferay theming, front-end technologies (HTML, CSS, JS, frameworks), API integration, and problem-solving. Expect questions on your experience with Clay UI, Freemarker, and Client Extensions.

• Portfolio Walkthrough: A dedicated session to present and discuss specific Liferay projects from your portfolio, explaining your role, technical approach, and outcomes.

• Behavioral/Cultural Fit Interview: Assessment of your collaboration style, problem-solving approach, and how you fit within the team and company culture, especially in a client-facing context.

• Final Interview: Potentially with a senior manager or client representative to finalize the decision.

Portfolio Review Tips:

• Curate Select Liferay Projects: Focus on projects that best demonstrate your Liferay DXP UI development skills, theme customization, fragment creation, and responsive design implementation.

• Highlight Your Role & Contributions: Clearly articulate your specific responsibilities, technical challenges you overcame, and the solutions you implemented for each project.

• Showcase Design Translation: Include examples of how you translated Figma/Adobe XD mockups into functional Liferay components, emphasizing pixel-perfect accuracy.

• Demonstrate Performance Optimization: If possible, include metrics or examples of how you improved page load times or front-end performance.

• Prepare to Discuss Technical Details: Be ready to explain your choices of CSS preprocessors, JavaScript frameworks within Liferay, and how you integrated with APIs.

Challenge Preparation:

• Liferay Theming Exercise: You might be asked to create a simple Liferay theme or modify an existing one, demonstrating your understanding of Freemarker, Clay CSS, and Liferay’s structure.

• Front-End Coding Challenge: A task involving HTML, CSS, and JavaScript to build a responsive component, potentially simulating a Liferay widget or fragment.

• API Consumption Scenario: A problem where you need to describe how you would consume a given API to display data dynamically on a Liferay page.

📝 Enhancement Note: For a specialized role like this, the technical interview and portfolio review are paramount. Be prepared to articulate Liferay-specific concepts and demonstrate practical application of your skills.

🛠 Tools & Technology Stack

Primary Tools:

• Liferay DXP: The core platform for development.

• Liferay Developer Studio / Blade CLI: Essential for Liferay development, deployment, and project management.

• Freemarker: The primary templating engine for Liferay themes and layouts.

• Clay UI: Liferay's front-end framework and design system.

• HTML5, CSS3 (SASS/LESS), JavaScript (ES6+): Core web development technologies.

• React.js / Angular / Vue.js: For modern front-end widget development within Liferay.

• Git: For version control and collaborative development.

• npm / Yarn: Package managers for JavaScript dependencies.

• Webpack / Gulp: Build tools for asset compilation, optimization, and bundling.

Analytics & Reporting:

• While not explicitly mentioned, front-end performance analysis tools like browser developer tools (Chrome DevTools, Firefox Developer Tools), Lighthouse, and potentially web analytics platforms (e.g., Google Analytics if integrated) may be used. CRM & Automation:

• Not directly relevant to this UI Developer role, but understanding how the front-end interacts with backend systems that might be managed by CRM or automation tools could be beneficial.

📝 Enhancement Note: Proficiency with Liferay's specific development tools (Developer Studio, Blade CLI) and its front-end framework (Clay UI) is as crucial as general front-end skills. Understanding build tools like Webpack is important for modern development workflows.

👥 Team Culture & Values

Operations Values:

• User-Centricity: A strong focus on creating intuitive, accessible, and engaging user experiences through meticulous UI design and implementation.

• Precision & Quality: Commitment to high standards in coding, design fidelity, and cross-browser/device compatibility.

• Collaboration: Working effectively within a team, sharing knowledge, and contributing to a positive development environment.

• Adaptability: Willingness to learn and adapt to new Liferay versions, technologies, and client requirements.

• Efficiency: Striving for optimized code and front-end performance to ensure smooth portal operations.

Collaboration Style:

• Cross-functional Integration: Close work with UI/UX designers to ensure design accuracy and with backend developers to ensure seamless data integration.

• Agile Teamwork: Active participation in Agile ceremonies (stand-ups, sprint planning, retrospectives) to contribute to team goals and provide feedback.

• Knowledge Sharing: Openness to sharing technical insights and best practices with team members, fostering a learning culture.

📝 Enhancement Note: The culture likely emphasizes technical excellence, collaborative problem-solving, and a commitment to delivering high-quality digital experiences, especially within the context of enterprise Liferay deployments.

⚡ Challenges & Growth Opportunities

Challenges:

• Liferay Version Specifics: Adapting to and mastering specific Liferay versions and their unique development paradigms (e.g., Client Extensions, Fragments).

• Cross-Browser/Device Compatibility: Ensuring consistent UI rendering and functionality across a wide range of browsers and devices, which can be complex in enterprise settings.

• Integrating with Legacy/Complex Backends: Working with potentially older or complex backend systems and APIs to fetch and display data, requiring careful front-end handling.

• Client Site Dynamics: Navigating different client environments, project priorities, and stakeholder expectations.

Learning & Development Opportunities:

• Liferay DXP Expertise: Becoming a highly sought-after expert in Liferay's front-end development capabilities.

• Advanced Front-End Techniques: Deepening knowledge in JavaScript frameworks, modern CSS techniques, and performance optimization strategies.

• Accessibility Standards: Gaining in-depth knowledge of WCAG and implementing accessible web designs.

• Exposure to Enterprise Architectures: Understanding how Liferay fits into larger enterprise IT landscapes.

📝 Enhancement Note: The primary challenge and growth opportunity lie in mastering the Liferay ecosystem. Successfully navigating its intricacies can position a developer for highly specialized and in-demand roles within organizations utilizing Liferay DXP.

💡 Interview Preparation

Strategy Questions:

• Liferay Theming Approach: "Describe your process for developing a custom Liferay theme. How do you ensure it's responsive and adheres to design specifications?" (Be ready to discuss Freemarker, Clay, Client Extensions).

• Component Development: "Walk me through a complex UI component you built for a Liferay portal. What were the technical challenges and how did you overcome them?" (Focus on JavaScript, API integration, and Liferay-specific implementation).

• Performance Optimization: "How do you approach optimizing the front-end performance of a Liferay portal? What tools and techniques do you use?" (Mention browser dev tools, caching, lazy loading, asset optimization).

• API Integration: "Explain how you would integrate a Liferay front-end with a RESTful API to display dynamic data. What considerations are important?" (Discuss JSON parsing, error handling, asynchronous operations).

Company & Culture Questions:

• "What interests you about working with Liferay DXP specifically?"

• "How do you approach collaborating with UI/UX designers and backend developers?"

• "Describe a time you had to adapt to a new technology or development process." Portfolio Presentation Strategy:

• Structure Your Case Studies: For each project, outline: Problem/Requirement -> Your Role/Solution -> Technologies Used (emphasize Liferay specifics) -> Outcome/Impact.

• Focus on Liferay Specifics: Clearly articulate how you utilized Liferay’s features (themes, fragments, templates, APIs) to achieve the results.

• Visual Demonstrations: Be prepared to share screenshots, live demos if possible, or detailed explanations of visual elements and responsiveness.

• Quantify Achievements: If you have metrics on performance improvements, user engagement, or efficiency gains, present them clearly.

📝 Enhancement Note: Prepare to dive deep into Liferay specifics. General front-end answers are good, but demonstrating a nuanced understanding of the Liferay environment will set you apart.

📌 Application Steps

To apply for this UI (Liferay) Developer position:

• Submit your application through the provided Workable link.

• Portfolio Customization: Ensure your resume and portfolio clearly highlight your Liferay DXP development experience, with specific examples of themes, fragments, and responsive designs. Tailor your portfolio to showcase projects most relevant to enterprise portal interfaces.

• Resume Optimization: Use keywords from the job description, such as "Liferay DXP," "Freemarker," "Clay UI," "Client Extensions," "HTML5," "CSS3," "JavaScript," "React," and "API integration." Quantify achievements where possible.

• Interview Preparation: Practice articulating your experience with Liferay development, front-end technologies, and problem-solving scenarios. Prepare your portfolio for a detailed walkthrough.

• Company Research: Familiarize yourself with Adree and their services, especially their expertise in Liferay DXP or digital transformation solutions. Understand the typical client environments for Liferay DXP implementations.

⚠️ Important Notice: This enhanced job description includes AI-generated insights and operations industry-standard assumptions. All details should be verified directly with the hiring organization before making application decisions.

---