UI Developer (Javascript)

📍 Job Overview

Job Title: UI Developer (Javascript)

Company: METRO/MAKRO

Location: Pune, Maharashtra, India

Job Type: Full-time

Category: Front-End Engineering / UI Development

Date Posted: 2026-06-01

Experience Level: 10+ years

Remote Status: On-site

🚀 Role Summary

• Spearhead the transformation of high-fidelity designs into pixel-perfect, responsive, and accessible user interfaces.

• Drive front-end performance excellence through advanced optimization techniques like code splitting, dynamic imports, and bundle size analysis.

• Develop and maintain a scalable design system, ensuring consistency and reusability of UI components across applications.

• Collaborate closely with back-end developers to integrate front-end applications with RESTful APIs, ensuring a seamless user experience.

📝 Enhancement Note: While the job title is "UI Developer (Javascript)", the extensive responsibilities around performance optimization, SSR/SSG/ISR, and integration with REST APIs suggest a role that leans heavily into full-stack front-end development capabilities, rather than purely UI implementation. The emphasis on "well-structured JavaScript" and "clean, maintainable JavaScript logic" further supports this. The role is likely seeking a senior individual contributor capable of architecting and implementing complex front-end solutions.

📈 Primary Responsibilities

• Translate Figma prototypes and designs into clean, semantic HTML5, modern CSS/SCSS, and well-structured JavaScript (ES6+).

• Build and maintain scalable, reusable UI components and contribute to the evolution of a cohesive design system.

• Ensure robust cross-browser compatibility, implementing necessary polyfills and fallbacks for a consistent user experience.

• Implement and champion performance optimization strategies including lazy loading, code splitting, dynamic imports, bundle size analysis, and Core Web Vitals improvements.

• Apply appropriate rendering or delivery techniques such as Server-Side Rendering (SSR), Static Site Generation (SSG), or Incremental Static Regeneration (ISR) where applicable.

• Implement and maintain Web Content Accessibility Guidelines (WCAG) compliant accessibility standards across all user interfaces.

• Integrate front-end applications with RESTful APIs, developing clean and maintainable JavaScript logic for data fetching and manipulation.

• Write comprehensive documentation for code, components, and processes, adhering to best practices for maintainability and knowledge sharing.

• Develop and execute automated tests for front-end applications using tools like Jest, React Testing Library, Cypress, or Playwright to ensure code quality and stability.

• Actively participate in code reviews, providing constructive feedback and helping to elevate the overall UI quality and front-end architecture standards.

📝 Enhancement Note: The responsibilities listed are typical for a senior front-end engineer or UI architect. The emphasis on performance, accessibility, and integration with APIs indicates a need for a developer who understands the full lifecycle of front-end development and its impact on user experience and business goals. The mention of SSR/SSG/ISR suggests potential involvement in projects utilizing frameworks like Next.js, even if not the primary focus.

🎓 Skills & Qualifications

Education: While formal education requirements are not specified, a Bachelor's degree in Computer Science, Engineering, or a related field, or equivalent practical experience, is generally expected for roles with this level of experience.

Experience:

• 8+ years of professional software development experience.

Required Skills:

• Strong expertise in JavaScript (ES6+), HTML5, CSS3, and SCSS.

• Deep knowledge of responsive design principles and mobile-first development methodologies.

• Proven ability to implement complex layout techniques.

• Solid understanding of performance optimization techniques including lazy loading, code splitting, dynamic imports, and bundle analysis.

• Experience with cross-browser compatibility issues and methods for resolving them (polyfills, fallbacks).

• Demonstrated experience in implementing WCAG accessibility best practices.

• Proficiency in consuming RESTful APIs.

• Strong understanding of Git workflow and version control.

• Experience with Continuous Integration/Continuous Deployment (CI/CD) pipelines.

Preferred Skills:

• Experience with SSR/SSG/ISR approaches.

• Familiarity with headless CMS and JAMstack architectures.

• Experience with front-end testing frameworks such as Jest, React Testing Library, Cypress, or Playwright.

• Knowledge of React and Next.js frameworks.

• Experience with design tools like Figma for translating prototypes.

📝 Enhancement Note: The "8+ years of professional software development" and "5+ years specializing in front-end engineering" clearly position this as a senior-level role. The preferred skills, particularly around Next.js and SSR/SSG/ISR, suggest that candidates with experience in modern full-stack JavaScript frameworks will be highly competitive.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• Demonstrate projects that showcase pixel-perfect UI implementation and responsive design across various devices.

• Provide examples of complex layout techniques and creative CSS/SCSS implementations.

• Highlight contributions to performance optimization, including metrics and specific techniques used (e.g., code splitting, asset optimization).

• Include case studies or examples of implementing WCAG accessibility standards and the impact on user experience.

Process Documentation:

• For projects involving component libraries or design systems, document the architecture, component usage guidelines, and versioning strategy.

• Detail the process for performance auditing and optimization, including tools used and iterative improvements made.

• Document the approach to ensuring cross-browser compatibility and accessibility compliance throughout the development lifecycle.

• Provide examples of how you've contributed to or utilized CI/CD pipelines for front-end deployments.

📝 Enhancement Note: For a senior UI Developer, a portfolio is crucial. It should not only display final products but also the thought process, technical challenges overcome, and the impact of the implemented solutions. The emphasis on process documentation highlights the expectation of a structured and methodical approach to development.

💵 Compensation & Benefits

Salary Range:

• Estimated Range: ₹2,000,000 - ₹3,500,000 per annum.

• Explanation: This estimate is based on industry benchmarks for senior UI Developers (8-10+ years of experience) in Pune, India, considering the company's size and the technical demands of the role, including advanced JavaScript, performance optimization, and accessibility. The range accounts for variations in specific skill sets and negotiation.

Benefits:

• Comprehensive health insurance coverage for employees and dependents.

• Retirement savings plan (Provident Fund) with company contribution.

• Paid time off, including vacation days, sick leave, and public holidays.

• Opportunities for professional development, including training, workshops, and conference attendance.

• Potential for performance-based bonuses or incentives.

Working Hours:

• Standard working hours are typically 40 hours per week.

• The role is on-site, requiring full-time presence at the Pune office.

• Flexibility may be available for start and end times, subject to team coordination and business needs, but core hours will likely be expected.

📝 Enhancement Note: The salary range is an estimation based on market data for senior front-end roles in Pune, India. Actual compensation will depend on the candidate's specific experience, skills, and negotiation. Benefits are standard for a company of this size and industry.

🎯 Team & Company Context

🏢 Company Culture

Industry: Retail and Wholesale. METRO AG is a leading international wholesale and food service specialist. METRO/MAKRO operates in 32 countries with 625 stores and a global team of 85,000 people. The Metro Global Solution Center (MGSC) provides internal finance, HR, IT, and business operations support.

Company Size: 1100-1200 employees within MGSC. Globally, METRO employs 85,000 people. This size indicates a significant, established organization with robust processes and opportunities for impact.

Founded: MGSC was established in 2011. This means the solution center has over a decade of experience in providing services and solutions, suggesting a stable and mature operational environment.

Team Structure:

• The UI Development team is likely part of a larger IT or Digital Solutions department within MGSC.

• Teams are structured to support various business functions and countries, implying a degree of specialization and cross-functional collaboration.

Methodology:

• Given the focus on modern front-end development, Agile methodologies (Scrum, Kanban) are likely employed for project management and development cycles.

• Emphasis on data-driven decision-making for performance optimization and user experience improvements.

• Adherence to established coding standards, design patterns, and quality assurance processes.

Company Website: https://www.metro-gsc.in/

📝 Enhancement Note: The company context highlights a large, international organization with a dedicated internal solution center. This suggests a stable work environment with opportunities to work on global-scale projects. The culture likely balances structured processes with a drive for efficiency and digital innovation.

📈 Career & Growth Analysis

Operations Career Level: This role is positioned as a Senior UI Developer. It requires extensive experience and a deep technical understanding of front-end development, performance optimization, and accessibility. The responsibilities indicate an individual contributor role with significant technical leadership and mentorship potential.

Reporting Structure: The UI Developer will likely report to a Team Lead or Engineering Manager within the IT department of MGSC. They will collaborate closely with product managers, designers, back-end developers, and potentially QA engineers.

Operations Impact: The role directly impacts the usability, performance, and accessibility of digital solutions used by METRO's internal teams and potentially external customers across 31 countries. By ensuring high-quality UI implementation and performance, this role contributes to increased user efficiency, satisfaction, and adoption of digital tools, which indirectly supports business operations and revenue generation.

Growth Opportunities:

• Technical Specialization: Deepen expertise in specific front-end frameworks, performance tuning, or accessibility standards.

• Architectural Leadership: Transition into a Front-End Architect role, responsible for designing and guiding the implementation of complex front-end systems.

• Team Lead/Management: Move into a leadership position, managing a team of developers, mentoring junior staff, and overseeing project delivery.

• Cross-functional Projects: Participate in projects involving back-end development, DevOps, or product strategy to broaden understanding of the software development lifecycle.

📝 Enhancement Note: The "10+ years" experience level identified by AI, combined with the responsibilities, strongly suggests a senior or lead-level position. The growth opportunities reflect typical career progression paths for highly skilled front-end engineers within large organizations.

🌐 Work Environment

Office Type: On-Site. The job listing explicitly states "Work Model: On-Site". This indicates a traditional office-based work environment.

Office Location(s): The primary office location is at the 7th Floor, ITPP, Kharadi, Pune, Maharashtra, India. This is a modern commercial hub in Pune.

Workspace Context:

• Expect a collaborative office setting designed for team interaction and focused work.

• Access to modern development tools and technology infrastructure will be provided.

• Opportunities for face-to-face collaboration with designers, product managers, and fellow developers will be frequent.

• The environment is likely structured, reflecting the operational standards of a large international company.

Work Schedule: Full-time, on-site work, typically 40 hours per week. Core working hours will likely be expected, with potential for some flexibility in start/end times depending on team and business needs.

📝 Enhancement Note: The on-site requirement is a key differentiator. Candidates should be prepared for a structured office environment and local commute. The location in Kharadi, Pune, is a well-established IT and commercial zone.

📄 Application & Portfolio Review Process

Interview Process:

• Initial Screening: A recruiter or HR representative will review applications for basic qualifications and cultural fit.

• Technical Interview(s): Expect one or more rounds focused on JavaScript fundamentals, HTML/CSS, responsive design, performance optimization, accessibility, and problem-solving. This may include live coding exercises or theoretical questions.

• Portfolio Review: A discussion of your past projects, focusing on your role, technical challenges, solutions, and impact. Be prepared to walk through specific examples of your work.

• System Design/Architecture Discussion: For a senior role, there may be a discussion on how you would approach designing complex UI systems, considering scalability, performance, and maintainability.

• Hiring Manager/Team Lead Interview: Focus on team fit, communication skills, and alignment with the company's values and working style.

Portfolio Review Tips:

• Curate 3-5 of your strongest projects that best represent the required skills (JavaScript, responsive design, performance, accessibility).

• For each project, clearly articulate the problem, your specific role and contributions, the technical solutions you implemented, and the measurable outcomes or impact.

• Be prepared to discuss trade-offs made during development and your decision-making process.

• Ensure your portfolio is accessible and easy to navigate, with clear descriptions and links to live demos or code repositories where possible.

Challenge Preparation:

• Practice coding challenges focused on algorithmic problems, data structures, and common JavaScript patterns.

• Prepare to discuss and solve problems related to performance bottlenecks, accessibility issues, and cross-browser compatibility.

• Be ready to articulate your thought process clearly and concisely during live coding or whiteboarding sessions.

• Familiarize yourself with common interview questions related to JavaScript, CSS, and front-end architecture.

📝 Enhancement Note: The emphasis on a portfolio review and potential system design discussions indicates that this role values practical experience and strategic thinking beyond just coding ability. Candidates should be prepared to demonstrate their problem-solving skills and architectural vision.

🛠 Tools & Technology Stack

Primary Tools:

• JavaScript (ES6+): Core language for all front-end development.

• HTML5 & CSS3/SCSS: For structuring and styling web content.

• Figma: For design prototyping and handoff.

• Git: For version control and collaborative development workflows.

Analytics & Reporting:

• Performance Tools: Lighthouse, WebPageTest, browser developer tools for performance analysis.

• Testing Frameworks: Jest, React Testing Library, Cypress, Playwright for automated testing.

CRM & Automation:

• RESTful APIs: For integrating front-end applications with back-end services.

• Build Tools: Likely Webpack, Rollup, or Vite for code bundling and optimization.

• CI/CD Tools: Familiarity with Jenkins, GitLab CI, GitHub Actions, or similar for automated deployment pipelines.

Potential Frameworks/Libraries (Implied or Preferred):

• React/Next.js: Preferred for SSR/SSG/ISR experience.

• Headless CMS: For content management.

• JAMstack: Architectural concepts.

📝 Enhancement Note: The Tech Stack section reflects the core requirements and preferred skills. The mention of specific testing tools and build tools indicates a modern, professional development environment. Candidates should be comfortable with a wide array of front-end development tools.

👥 Team Culture & Values

Operations Values:

• Customer Focus: A commitment to delivering high-quality, user-friendly interfaces that meet the needs of internal and external customers across METRO's global operations.

• Efficiency & Optimization: A drive to improve performance, streamline processes, and build scalable, maintainable code, reflecting the operational goals of MGSC.

• Quality & Excellence: Adherence to high standards for code quality, accessibility, and design fidelity, ensuring robust and reliable digital solutions.

• Collaboration & Teamwork: Fostering a collaborative environment where team members support each other, share knowledge, and work together to achieve common goals.

• Continuous Learning: Encouraging a culture of ongoing skill development and adaptation to new technologies and best practices in front-end development.

Collaboration Style:

• Cross-functional Integration: Close collaboration with designers, product managers, and back-end developers to ensure seamless integration of UI components and functionalities.

• Agile Practices: Participation in Agile ceremonies, including daily stand-ups, sprint planning, and retrospectives, promoting iterative development and feedback.

• Knowledge Sharing: Actively participating in code reviews, pair programming sessions, and internal knowledge-sharing forums to elevate team capabilities.

• Data-Informed Decisions: Utilizing performance metrics and user feedback to inform design and development decisions.

📝 Enhancement Note: The culture is likely a blend of corporate structure from METRO AG and a more agile, tech-focused approach from the MGSC IT department. Expect a professional environment that values efficiency, quality, and collaborative problem-solving.

⚡ Challenges & Growth Opportunities

Challenges:

• Performance Optimization at Scale: Ensuring optimal performance across a wide range of applications and user devices globally, while managing complex codebases.

• Maintaining Design System Consistency: Upholding the integrity and scalability of the design system across numerous features and projects, potentially with evolving design requirements.

• Cross-Browser & Device Compatibility: Addressing the complexities of ensuring a consistent and accessible experience across diverse browsers, operating systems, and devices used by METRO's global workforce.

• Integrating with Legacy Systems: Potentially working with or integrating into existing, possibly older, back-end systems that may have limitations or require specific integration patterns.

Learning & Development Opportunities:

• Advanced Front-End Techniques: Opportunities to deepen expertise in areas like performance engineering, accessibility compliance, and modern JavaScript frameworks.

• Architectural Design: Exposure to front-end architecture design and decision-making processes for large-scale applications.

• Cross-Disciplinary Exposure: Learning about back-end development, DevOps practices, and product management through collaboration on projects.

• Professional Certifications: Support for obtaining relevant certifications in areas like accessibility or specific development frameworks.

📝 Enhancement Note: The challenges highlight the complexities of working within a large, global enterprise. The growth opportunities are geared towards advancing technical expertise and potentially moving into leadership or architectural roles.

💡 Interview Preparation

Strategy Questions:

• "Describe a complex UI challenge you faced related to performance optimization and how you resolved it. What metrics did you use to measure success?" (Focus on process, tools, and quantifiable results.)

• "How do you approach ensuring WCAG accessibility compliance in your development process? Walk me through a specific example." (Highlight adherence to standards and practical implementation.)

• "Imagine you need to build a reusable component for a design system. What are the key considerations regarding its API, state management, and styling?" (Demonstrate understanding of component architecture and reusability.)

Company & Culture Questions:

• "Based on what you know about METRO/MAKRO and MGSC, how do you see your role contributing to the company's overall mission?" (Research company values and operations.)

• "How do you stay updated with the latest trends and best practices in front-end development?" (Showcase a commitment to continuous learning.)

Portfolio Presentation Strategy:

• Select projects that clearly demonstrate your proficiency in JavaScript, responsive design, performance optimization, and accessibility.

• For each project, prepare a concise narrative: Problem -> Your Solution -> Impact/Results.

• Be ready to dive into specific code snippets or architectural decisions if prompted.

• Quantify achievements whenever possible (e.g., "reduced load time by X%", "improved accessibility score from Y to Z").

• Practice presenting your portfolio concisely, allocating roughly 5-7 minutes per project.

📝 Enhancement Note: The interview preparation emphasizes demonstrating practical problem-solving, technical depth, and an understanding of how front-end development impacts business goals. A strong portfolio that clearly articulates impact is essential.

📌 Application Steps

To apply for this UI Developer position:

• Submit your application through the provided link on jobs.smartrecruiters.com.

• Portfolio Customization: Ensure your resume and any linked portfolio highlight your extensive experience (8+ years overall, 5+ years front-end) with JavaScript (ES6+), HTML5, CSS3/SCSS, responsive design, and performance optimization. Tailor descriptions to match keywords from the job post.

• Resume Optimization: Clearly list your experience with specific front-end tools and technologies mentioned (Figma, Git, testing frameworks, REST APIs). Quantify achievements where possible to showcase impact.

• Interview Preparation: Practice answering technical questions on JavaScript, performance, and accessibility. Prepare to discuss your portfolio projects in detail, focusing on problem-solving and outcomes.

• Company Research: Understand METRO AG's business, the role of MGSC, and the company's commitment to digital solutions. This will help you tailor your answers and demonstrate genuine interest.

⚠️ 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.