UI Developer (Javascript)

📍 Job Overview

Job Title: UI Developer (Javascript)

Company: METRO/MAKRO

Location: Pune, Maharashtra, India

Job Type: Full-time

Category: Engineering / Front-End Development

Date Posted: March 20, 2026

Experience Level: 10+ Years

Remote Status: On-site

🚀 Role Summary

• This role is focused on translating high-fidelity designs into pixel-perfect, responsive, and accessible user interfaces, embodying a strong emphasis on front-end engineering excellence.

• Key responsibilities include the implementation of clean, semantic HTML5, modern CSS/SCSS, and well-structured JavaScript, with a direct impact on user experience and application performance.

• The position requires building scalable, reusable UI components and maintaining a cohesive design system, contributing to the overall consistency and maintainability of the front-end architecture.

• A significant aspect of the role involves driving performance optimization through advanced techniques such as code splitting, dynamic imports, and bundle size analysis, directly influencing application load times and user satisfaction.

📝 Enhancement Note: While the job title is "UI Developer (Javascript)", the extensive responsibilities related to performance optimization, cross-browser compatibility, accessibility, and API integration suggest a senior front-end engineering role with a strong focus on building robust and scalable user interfaces, rather than purely visual design implementation. The mention of SSR/SSG/ISR and React/Next.js experience, even if not the primary focus, indicates a need for a developer with a broad understanding of modern front-end architectures.

📈 Primary Responsibilities

• Translate Figma (or similar) prototypes into pixel-perfect, responsive, and accessible UI implementations using HTML5, CSS/SCSS, and JavaScript.

• Develop and maintain a scalable, reusable UI component library and contribute to a cohesive design system for enhanced maintainability and consistency.

• Ensure robust cross-browser compatibility, implementing necessary polyfills and fallbacks to guarantee a seamless user experience across different platforms.

• Drive front-end performance excellence by implementing strategies like smart asset loading (lazy loading), code splitting, dynamic imports, and bundle size analysis.

• Apply appropriate rendering or delivery techniques (e.g., SSR/SSG/ISR) where applicable to optimize application performance and user experience.

• Implement and uphold WCAG-compliant accessibility standards, ensuring digital products are usable by all individuals.

• Integrate front-end applications with RESTful APIs, employing clean, maintainable JavaScript logic for efficient data exchange.

• Produce comprehensive documentation, write clean code, and enforce quality through adherence to established best practices in front-end development.

• Contribute to the development and execution of testing strategies using modern tools such as Jest, React Testing Library, Cypress, or Playwright.

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

📝 Enhancement Note: The responsibilities highlight a need for a senior-level developer who can not only implement designs but also architect and optimize the front-end for performance, scalability, and accessibility. The emphasis on testing, documentation, and code reviews points to a role that values code quality and team collaboration.

🎓 Skills & Qualifications

Education: While no specific degree is mentioned, a Bachelor's or Master's degree in Computer Science, Engineering, or a related field is typically expected for roles with this level of experience, or equivalent practical 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 experience with complex layout techniques and ensuring cross-browser compatibility, including the use of polyfills.

• Solid understanding and practical application of performance optimization techniques (e.g., lazy loading, code splitting, dynamic imports, bundle analysis).

• Demonstrated experience in implementing WCAG accessibility best practices and standards.

• Experience consuming RESTful APIs with clean, maintainable JavaScript.

• Proficient in Git workflow and familiar with CI/CD principles and practices.

Preferred Skills:

• Experience with SSR/SSG/ISR approaches.

• Familiarity with headless CMS and JAMstack concepts.

• Knowledge of React/Next.js is a plus.

📝 Enhancement Note: The requirement for 8+ years of software development experience and 5+ years in front-end engineering, coupled with specific advanced skills like SSR/SSG/ISR and performance optimization techniques, clearly positions this as a senior or lead front-end developer role. The "preferred skills" indicate a leaning towards modern web development stacks and architectures.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• Showcase examples of pixel-perfect UI implementations that demonstrate a strong understanding of responsive design and cross-browser compatibility.

• Include case studies detailing performance optimization efforts, highlighting metrics for improvement (e.g., Lighthouse scores, load times) and the techniques used.

• Provide examples of reusable UI components and contributions to a design system, illustrating scalability and maintainability.

• Demonstrate experience in implementing WCAG 2.1 AA accessibility standards, showing how accessibility was considered and integrated into the development process.

Process Documentation:

• Document the approach taken to ensure cross-browser compatibility and address potential issues.

• Outline the methodology for performance analysis and optimization, including tools used and iterative improvement processes.

• Detail the process for building and maintaining reusable components and contributing to design systems.

• Explain the steps taken to ensure accessibility compliance throughout the development lifecycle.

📝 Enhancement Note: For a senior front-end role, a portfolio is crucial. It should not just display finished products but also the developer's thought process, problem-solving skills, and technical depth, particularly in areas like performance, accessibility, and component architecture. The emphasis should be on demonstrating how processes were applied to achieve specific, measurable outcomes.

💵 Compensation & Benefits

Salary Range:

Based on the Pune, India location, 10+ years of experience in front-end development, and the specialized skills required (JavaScript, HTML5, CSS3, SCSS, performance optimization, accessibility, SSR/SSG/ISR), the estimated annual salary range for this role is ₹18,00,000 - ₹30,00,000. This estimate is derived from a combination of industry benchmarks for senior software engineers in India, specific data for front-end developers in Pune, and consideration for the advanced technical requirements outlined in the job description.

Benefits:

• Comprehensive health insurance (medical, dental, vision).

• Paid time off (vacation, sick leave, holidays).

• Retirement savings plan or provident fund contribution.

• Professional development opportunities, including training, certifications, and conference attendance.

• Potential for performance-based bonuses or incentives.

• Access to modern development tools and technologies.

Working Hours:

The standard working hours are 40 hours per week, aligning with typical industry expectations for full-time roles in India. Flexibility may be available, but the primary work model is on-site.

📝 Enhancement Note: Salary estimation for senior tech roles in India can vary significantly based on the specific company, the exact scope of responsibilities, and the candidate's negotiation skills. The estimated range provided is a benchmark for a highly experienced front-end developer in a major tech hub like Pune.

🎯 Team & Company Context

🏢 Company Culture

Industry: Wholesale & Retail (specifically, international wholesale with a strong focus on food service distribution). METRO AG operates a large international wholesale network and is involved in food service distribution.

Company Size: 1100-1200 employees at the Metro Global Solution Center (MGSC) in Pune. Globally, METRO is a large enterprise with 85,000 employees across 32 countries.

Founded: Metro Global Solution Center (MGSC) was established in 2011. METRO AG itself has a much longer history.

Team Structure:

• The role is within the Metro Global Solution Center (MGSC) in Pune, which acts as an internal solution partner for METRO.

• The UI Developer will likely be part of an IT or Digital Solutions team, potentially within a broader Engineering or Product Development department.

Methodology:

• The company emphasizes providing high-quality services and solutions, driving efficiency, and satisfying internal customers.

• The IT and Digital Solutions teams likely follow agile methodologies for software development, focusing on iterative delivery and continuous improvement.

• Data analysis and performance metrics are important, as indicated by the focus on performance optimization in the job description.

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

📝 Enhancement Note: MGSC's role as an internal solution partner means the UI Developer will be working on internal-facing tools and platforms that support METRO's global operations. This offers a unique opportunity to impact business processes across multiple countries.

📈 Career & Growth Analysis

Operations Career Level: This is a Senior Front-End Engineer position, indicated by the 8+ years of overall software development experience and 5+ years specifically in front-end engineering. The responsibilities include architectural input, performance optimization, and mentoring, suggesting a potential for leadership.

Reporting Structure: The UI Developer will likely report to an Engineering Manager or a Lead Front-End Developer. They will collaborate extensively with product managers, designers, backend developers, and QA engineers.

Operations Impact: This role directly impacts the user experience of internal employees and potentially external partners who use METRO's digital platforms. By ensuring high-fidelity, performant, and accessible UIs, the developer contributes to improved operational efficiency, user adoption, and overall satisfaction with digital tools.

Growth Opportunities:

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

• Team Leadership: Progress to a Lead UI Developer or Front-End Architect role, overseeing technical direction and mentoring junior engineers.

• Cross-Functional Roles: Transition into roles focused on UI/UX strategy, product development, or even DevOps, leveraging a strong understanding of the full software development lifecycle.

• Global Exposure: Work on projects supporting METRO's operations in 31 countries, gaining exposure to diverse business needs and technical challenges.

📝 Enhancement Note: The "Operations Impact" is framed in terms of how front-end development contributes to the efficiency and effectiveness of METRO's internal operations and digital solutions. This aligns with a broader "Revenue Operations" or "GTM Operations" perspective where technology directly underpins business processes.

🌐 Work Environment

Office Type: The job description explicitly states "Work Model: On-Site." This indicates a traditional office environment at the specified Pune location.

Office Location(s): 7th Floor, ITPP, Kharadi, Pune, Maharashtra, India, 411015.

Workspace Context:

• The on-site model suggests a collaborative environment where face-to-face interaction with colleagues, including team members, managers, and cross-functional stakeholders, is encouraged.

• Access to modern development tools, high-speed internet, and potentially dedicated workspace setups for coding and testing.

• Opportunities for informal knowledge sharing and problem-solving sessions with team members.

Work Schedule: The standard work schedule is 40 hours per week. While on-site, there might be some flexibility in daily hours, but adherence to core working hours for team collaboration and meetings is expected.

📝 Enhancement Note: The "On-Site" work model is a key differentiator. For operations roles, this often implies a need for close collaboration, direct engagement with stakeholders, and a structured work environment conducive to focused development and problem-solving.

📄 Application & Portfolio Review Process

Interview Process:

• Initial Screening: A review of the resume and portfolio to assess experience, skills, and alignment with the role's technical requirements and the company's operational needs.

• Technical Interview(s): In-depth discussions covering JavaScript, HTML, CSS, responsive design, performance optimization, accessibility, and API integration. This may include live coding exercises or problem-solving scenarios.

• Portfolio Presentation/Discussion: A dedicated session to walk through selected projects from the portfolio, explaining technical decisions, challenges overcome, and quantifiable results.

• Behavioral/Cultural Fit Interview: Assessment of soft skills, problem-solving approach, teamwork, and alignment with METRO/MAKRO's company culture and values.

• Final Interview: Potentially with a hiring manager or senior leadership to discuss role expectations, career growth, and final decision-making.

Portfolio Review Tips:

• Highlight Impact: Focus on case studies that demonstrate quantifiable improvements in performance, user experience, or accessibility. Use metrics (e.g., load time reduction, Lighthouse scores, accessibility compliance levels).

• Showcase Process: Explain your thought process, the challenges you faced, and how you arrived at your solutions. Detail your approach to responsive design, cross-browser compatibility, and performance optimization.

• Component Reusability: Present examples of well-architected, reusable UI components and explain their contribution to a design system or overall project maintainability.

• Accessibility Integration: Clearly articulate how you integrated WCAG standards into your development workflow, providing specific examples.

Challenge Preparation:

• Be ready to discuss real-world scenarios related to performance bottlenecks, cross-browser issues, or complex UI implementations.

• Practice explaining technical concepts clearly and concisely, as if presenting to both technical and non-technical stakeholders.

• Prepare to discuss your experience with Git, CI/CD, and automated testing tools.

📝 Enhancement Note: The emphasis on a portfolio and specific technical skills means candidates should be prepared to demonstrate their expertise through concrete examples and detailed explanations of their development processes. The interview process will likely be rigorous, focusing on both technical proficiency and problem-solving capabilities.

🛠 Tools & Technology Stack

Primary Tools:

• Core Languages: JavaScript (ES6+), HTML5, CSS3, SCSS.

• Frameworks/Libraries: While React/Next.js is preferred, deep understanding of core JavaScript is paramount. Experience with other modern JS frameworks might be beneficial.

• Design Prototyping: Figma (or similar tools like Sketch, Adobe XD).

Analytics & Reporting:

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

• Bundle Analysis Tools: Webpack Bundle Analyzer, Rollup Analyzer.

CRM & Automation:

• Version Control: Git (with strong Git workflow knowledge).

• CI/CD Tools: Familiarity with CI/CD pipelines (e.g., Jenkins, GitLab CI, GitHub Actions).

• Testing Frameworks: Jest, React Testing Library, Cypress, Playwright.

• Build Tools: Potentially Webpack, Rollup, Vite.

📝 Enhancement Note: The technology stack emphasizes foundational front-end technologies and modern best practices. Proficiency in performance analysis and optimization tools, as well as robust testing frameworks, is critical for this role.

👥 Team Culture & Values

Operations Values:

• Customer Focus: Delivering high-quality solutions that satisfy internal customers (METRO's business units and employees).

• Efficiency & Performance: Driving operational efficiency through optimized digital solutions and high-performing UIs.

• Quality & Passion: A commitment to delivering services and solutions with high quality and dedication.

• Innovation & Digitalization: Setting tomorrow's standards through digital solutions and embracing new technologies.

Collaboration Style:

• Cross-functional Integration: Close collaboration with designers, backend developers, QA engineers, and product managers to deliver integrated solutions.

• Knowledge Sharing: Active participation in code reviews, team discussions, and potentially internal workshops to share best practices and learnings.

• Data-Driven Approach: Utilizing performance metrics and user feedback to inform development decisions and drive continuous improvement.

📝 Enhancement Note: The company culture, as described, is focused on service delivery, efficiency, and digital transformation. The operations values highlight a commitment to quality and customer satisfaction, which are directly influenced by the performance and usability of the digital tools developed by this role.

⚡ Challenges & Growth Opportunities

Challenges:

• Balancing Performance and Features: Optimizing UIs for speed and responsiveness while incorporating complex features and functionality.

• Maintaining Cross-Browser/Device Compatibility: Ensuring a consistent and high-quality user experience across a wide range of browsers, devices, and operating systems.

• Implementing and Maintaining Accessibility Standards: Consistently adhering to WCAG guidelines and ensuring all developed interfaces are accessible to users with disabilities.

• Integrating with Diverse Backend Systems: Seamlessly connecting front-end applications with various RESTful APIs, potentially from legacy or complex systems.

Learning & Development Opportunities:

• Advanced Front-End Architectures: Gaining deeper expertise in SSR, SSG, ISR, and modern JavaScript frameworks.

• Performance Engineering: Becoming a specialist in front-end performance optimization and Core Web Vitals.

• Accessibility Auditing and Remediation: Developing advanced skills in identifying and fixing accessibility issues.

• Mentorship: Opportunities to mentor junior developers and contribute to the team's technical growth.

• Global Project Exposure: Working on projects that have a significant impact across METRO's international operations.

📝 Enhancement Note: The challenges are typical for a senior front-end role but are amplified by the scale and international nature of METRO's operations. The growth opportunities are structured around deepening technical expertise and taking on more responsibility within the organization.

💡 Interview Preparation

Strategy Questions:

• Technical Deep Dive: Prepare to discuss your approach to building performant, scalable, and accessible UIs. Be ready to explain your understanding of JavaScript event loops, memory management, and rendering strategies.

• Problem-Solving Scenarios: Anticipate questions about how you would debug performance issues, handle complex state management, or implement specific UI patterns.

• Portfolio Walkthrough: Prepare to present 2-3 key projects from your portfolio, focusing on the technical challenges, your solutions, and the impact achieved. Quantify your contributions where possible.

Company & Culture Questions:

• Research METRO AG's business model, global presence, and the role of MGSC as an internal solution partner. Understand their commitment to digitalization.

• Be prepared to discuss how your skills and approach align with METRO's values of customer focus, efficiency, and quality.

Portfolio Presentation Strategy:

• Structure: Organize your portfolio to highlight projects relevant to performance, accessibility, and component architecture. For each project, clearly state the problem, your role, the solution, the technologies used, and the quantifiable results.

• Technical Depth: Be ready to discuss the "why" behind your technical decisions. Explain your choices regarding JavaScript patterns, CSS methodologies, and performance optimization techniques.

• Accessibility Focus: Demonstrate how you integrated accessibility from the ground up, not as an afterthought.

📝 Enhancement Note: Interview preparation for this role should heavily focus on practical application of skills, demonstrated through the portfolio. Candidates should be ready to articulate their technical reasoning and quantify their impact.

📌 Application Steps

To apply for this operations position:

• Submit your application through the provided SmartRecruiters link.

• Tailor your resume: Highlight your 8+ years of software development and 5+ years of front-end engineering experience, specifically mentioning your expertise in JavaScript (ES6+), HTML5, CSS3, SCSS, responsive design, performance optimization, and accessibility. Use keywords from the job description.

• Prepare your portfolio: Curate 2-3 strong projects that showcase your best work in UI implementation, performance optimization, accessibility, and component reusability. Ensure you can articulate the technical details and impact of each project.

• Research METRO/MAKRO: Understand their business, the role of MGSC, and their focus on digital solutions. This will help you tailor your answers during interviews and demonstrate your interest.

• Practice technical explanations: Be ready to discuss your approach to common front-end challenges, especially those related to performance, cross-browser compatibility, and accessibility, and how you would implement solutions on-site.

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

---