Frontend Engineer (Performance & UI Rendering)

📍 Job Overview

Job Title: Frontend Engineer (Performance & UI Rendering)

Company: Arsys ES

Location: Logroño, La Rioja, Spain

Job Type: Full-Time

Category: Frontend Engineering / Software Development

Date Posted: 2026-04-28T13:56:31

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

Remote Status: Hybrid

🚀 Role Summary

• Drive the transformation of Nextcloud Office into a high-performance, modern web-based productivity suite.

• Own the user interface and rendering performance, ensuring smooth and responsive experiences even with complex documents and spreadsheets.

• Develop advanced frontend features, including interactive elements, charts, and conditional formatting.

• Optimize crucial rendering logic by leveraging Canvas API or hardware-accelerated technologies for superior performance.

• Implement and maintain a modern, performance-optimized CSS system supporting features like dark mode and high-contrast themes.

• Utilize AI-assisted development tools to accelerate workflow while maintaining high standards of code quality and performance.

📝 Enhancement Note: This role is specifically focused on the performance and rendering aspects of a web-based productivity suite, requiring deep expertise in client-side optimization, graphics rendering, and modern frontend architectures. The emphasis on "going beyond traditional DOM-driven applications" suggests a need for innovative approaches to UI rendering.

📈 Primary Responsibilities

• Architect and implement new frontend features for Nextcloud Office, including advanced charting capabilities, dynamic conditional formatting, and interactive document elements.

• Develop and maintain fast, highly responsive user interfaces utilizing modern JavaScript (ESNext) and best practices for client-side performance.

• Guarantee a consistent 60 frames per second (60fps) user experience across all interactions, such as scrolling, typing, and zooming, even under heavy data loads.

• Strategically migrate performance-critical rendering logic from the Document Object Model (DOM) to more efficient rendering contexts like Canvas API or other hardware-accelerated technologies.

• Refactor and modernize legacy CSS stylesheets into a robust, performance-optimized system, incorporating CSS variables to support features like dark mode and high-contrast themes.

• Implement advanced responsive UI patterns, such as optimistic UI updates, to significantly enhance the perceived performance and user satisfaction.

• Collaborate closely with backend and other engineering teams to identify and resolve latency issues, optimizing the overall real-time user experience.

• Effectively leverage AI tools and platforms to accelerate the development lifecycle, with a keen focus on maintaining and improving performance, handling edge cases, and upholding exceptional UI quality.

📝 Enhancement Note: The responsibilities highlight a strong bias towards performance engineering within the frontend domain. Specific tasks like migrating rendering logic to Canvas, ensuring 60fps, and optimizing CSS suggest a role that requires a deep understanding of browser rendering pipelines and efficient code execution.

🎓 Skills & Qualifications

Education: While no specific degree is mentioned, a strong foundation in Computer Science, Software Engineering, or a related field is typically expected for roles involving complex frontend development and performance optimization.

Experience: Mid-level experience (2-5 years) in frontend development, with a demonstrable track record in performance-critical applications.

Required Skills:

• Proficient in modern JavaScript (ESNext) with a deep understanding of its nuances and performance implications.

• In-depth knowledge of DOM behavior, event handling, and performance trade-offs associated with DOM manipulation.

• Hands-on experience with the Canvas API for custom rendering or familiarity with Canvas rendering libraries (e.g., PixiJS, Fabric.js).

• Proven expertise in frontend performance optimization techniques, including code splitting, lazy loading, and rendering pipeline tuning.

• Experience utilizing Web Workers to offload computationally intensive tasks from the main thread, improving UI responsiveness.

• Solid understanding of modern CSS, including CSS variables, animations, and performance-oriented styling practices.

Preferred Skills:

• Experience in demanding frontend environments such as interactive applications, complex data visualization platforms, or graphics-heavy web applications.

• Familiarity with progressive web app (PWA) principles and techniques for enhancing web application performance and user experience.

• Knowledge of accessibility standards (WCAG) and implementing accessible UI components, especially within high-performance contexts.

• Experience with build tools and bundlers (e.g., Webpack, Vite) and their role in performance optimization.

• Understanding of cross-browser compatibility issues and strategies for ensuring consistent rendering and performance.

📝 Enhancement Note: The emphasis on Canvas API, Web Workers, and performance optimization techniques points towards a candidate who can tackle complex rendering challenges. The mention of AI tools alongside code quality highlights a need for pragmatic developers who can leverage new technologies responsibly.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• Showcase projects demonstrating advanced frontend performance optimization, quantified with measurable improvements (e.g., reduced load times, smoother animations).

• Include examples of complex UI components or interactive elements developed with a focus on rendering efficiency and responsiveness.

• Present case studies of technical challenges related to DOM manipulation, rendering bottlenecks, or offloading work from the main thread.

• Highlight any experience with Canvas API or custom rendering solutions, detailing the technical approach and outcomes.

Process Documentation:

• Document the process of identifying and resolving performance bottlenecks in a frontend application, including tools and methodologies used.

• Illustrate the workflow for implementing new features with a strong emphasis on performance considerations from the outset.

• Detail the approach to refactoring legacy code or styling for improved performance and maintainability, with specific examples.

• Showcase experience with implementing and testing responsive UI patterns and their impact on user experience metrics.

📝 Enhancement Note: For this role, a portfolio should heavily emphasize measurable performance improvements and complex rendering solutions. Candidates should be prepared to walk through the technical decisions made to achieve specific performance targets, especially those involving Canvas or Web Workers.

💵 Compensation & Benefits

Salary Range: For a mid-level Frontend Engineer in Logroño, Spain, with 2-5 years of experience and specialized skills in performance and UI rendering, the estimated annual salary range is typically between €30,000 and €45,000 gross. This estimate is based on regional salary benchmarks for software engineering roles in Spain, considering the niche specialization in performance and rendering, and the hybrid work model.

Benefits:

• Hybrid Work Model: Offers flexibility with a preference for their offices in Alcobendas, Valencia, Barcelona, Sevilla, or Logroño, allowing for a balance between remote work and in-office collaboration.

• Flexible Working Hours: Empowers employees to manage their schedules, promoting work-life balance and accommodating individual productivity peaks.

• Flexible Compensation Package: Suggests a customizable benefits structure, potentially including options for health insurance, additional retirement contributions, or other financial incentives.

• Discounts on Arsys Products & Technology Brands: Provides tangible cost savings on company products and popular technology items, adding value beyond the base salary.

• Personalized Training and Development Plans: Demonstrates a commitment to employee growth, offering tailored learning opportunities to enhance skills and career progression.

• Biannual Team Events: Fosters team cohesion and provides opportunities for networking and social interaction outside of the daily work environment.

• Access to Advanced AI Tools: Grants unrestricted use of cutting-edge AI tools, supporting innovation and efficiency in development tasks.

• Challenging Frontend Problems: Offers engaging and complex technical challenges that stimulate professional growth and technical mastery.

• Engineering Culture: A supportive environment focused on quality, performance, and continuous improvement, ideal for engineers who value technical excellence.

Working Hours: The role is likely based on a standard 40-hour work week, typical for full-time positions in Spain. The inclusion of "Flexible working hours" suggests that while the total hours are standard, the specific start and end times can be adjusted to accommodate personal needs and team coordination.

📝 Enhancement Note: The salary estimate is based on general market data for Spain and adjusted for the specialized nature of the role and experience level. The benefits package is comprehensive, with a strong emphasis on professional development and access to advanced technology, which are attractive to skilled engineers.

🎯 Team & Company Context

🏢 Company Culture

Industry: Technology / Software Development, specifically focused on cloud-based productivity and collaboration solutions (Nextcloud Office). Arsys ES operates within the broader IT services and cloud infrastructure sector.

Company Size: While specific numbers for Arsys ES are not provided, Greenhouse job postings often come from companies with established engineering teams. The mention of multiple office locations (Alcobendas, Valencia, Barcelona, Sevilla, Logroño) suggests a medium to large-sized organization.

Founded: Arsys was founded in 1996. This long history indicates a stable company with experience in the evolving technology landscape, likely having weathered significant industry shifts and adapted its practices.

Team Structure:

• The role is within a dedicated frontend engineering team focused on Nextcloud Office. This team likely comprises engineers specializing in different areas of frontend development, potentially including UI/UX designers, QA specialists, and product managers.

• The reporting structure is not explicitly defined but is typical for a mid-level engineer, likely reporting to a Frontend Lead or Engineering Manager.

Methodology:

• Data Analysis and Insights: Emphasis on performance metrics (FPS, load times, responsiveness) and user behavior data to drive engineering decisions.

• Workflow Planning and Optimization: Applying agile methodologies, with a strong focus on iterative development and continuous improvement of processes and code.

• Automation and Efficiency: Utilizing AI tools and automation to streamline development, testing, and deployment processes, aiming for maximum efficiency without sacrificing quality.

Company Website: https://www.arsys.es/

📝 Enhancement Note: The company's long history and presence across multiple Spanish cities suggest a stable, established tech company. The focus on Nextcloud Office indicates a commitment to specific product development within the collaboration space.

📈 Career & Growth Analysis

Operations Career Level: This is a Mid-Level Frontend Engineer position. It signifies a role where an individual is expected to operate with a degree of autonomy, contribute significantly to feature development, and possess specialized knowledge in performance and rendering. They are beyond junior responsibilities, expected to solve complex problems, and mentor less experienced team members.

Reporting Structure: The engineer will likely report to a Frontend Team Lead or Engineering Manager who oversees the development of Nextcloud Office. Close collaboration with other frontend engineers, backend engineers, and product managers is expected.

Operations Impact: The impact is direct and significant. By optimizing performance and rendering, this role directly influences user experience, application speed, and scalability. A high-performance product leads to better user retention, increased adoption rates, and a stronger competitive advantage, thereby contributing to the overall success and revenue potential of Nextcloud Office.

Growth Opportunities:

• Technical Specialization: Deepen expertise in client-side performance optimization, advanced rendering techniques (Canvas, WebGL), and potentially explore areas like WebAssembly for further performance gains.

• Leadership Development: Progress to a Senior Frontend Engineer role, taking on more complex architectural challenges, leading feature development, and mentoring junior engineers. Potential for a Frontend Team Lead or Architect position.

• Cross-Functional Skill Development: Gain exposure to backend technologies, cloud infrastructure, and product management aspects through close collaboration, broadening skill sets for future roles.

• AI Integration Expertise: Become a leader in leveraging AI tools for software development within the company, potentially contributing to internal best practices and tooling.

📝 Enhancement Note: The role offers a clear path for technical specialization in a high-demand area of frontend development. Growth into senior technical leadership or management roles is plausible given the company's structure and the challenging nature of the work.

🌐 Work Environment

Office Type: The company offers a hybrid work model, indicating a blend of remote work and in-office presence. The preference for specific office locations (Alcobendas, Valencia, Barcelona, Sevilla, or Logroño) suggests well-equipped office spaces designed for collaboration.

Office Location(s): Alcobendas, Valencia, Barcelona, Sevilla, or Logroño, Spain. These are major cities, offering good connectivity and amenities. The specific location within Logroño is Calle Circunde 16, 26006.

Workspace Context:

• Collaborative Environment: The hybrid model necessitates effective communication and collaboration tools. Offices are likely set up to facilitate team meetings, brainstorming sessions, and pair programming.

• Operations Tools & Technology: Access to modern development tools, high-performance workstations, and potentially specialized hardware for performance testing. The company explicitly mentions access to advanced AI tools with no usage restrictions.

• Team Interaction: Opportunities for direct interaction with fellow frontend engineers, backend developers, product owners, and potentially designers, fostering a dynamic and communicative work environment.

Work Schedule: A standard 40-hour work week is implied, with "Flexible working hours" offering adaptability. This flexibility is crucial for engineers working on complex performance tasks, allowing them to optimize their personal workflow and balance deep work sessions with team collaboration needs.

📝 Enhancement Note: The hybrid model and multiple office locations provide flexibility. The emphasis on AI tools and challenging problems suggests an environment that values innovation and technical problem-solving.

📄 Application & Portfolio Review Process

Interview Process:

• Initial Screening: A recruiter or hiring manager will review your application and resume, focusing on relevant experience in frontend development, performance optimization, and JavaScript.

• Technical Interview(s): Expect in-depth discussions on JavaScript fundamentals, DOM manipulation, rendering performance, Canvas API, Web Workers, and CSS optimization. This may include live coding challenges or system design questions focused on performance challenges.

• Portfolio Review: Be prepared to present and discuss specific projects from your portfolio that showcase your expertise in performance-critical applications. Focus on the challenges, your technical approach, and the measurable results achieved.

• Team/Culture Fit Interview: Discussion with potential team members or a manager to assess your collaboration style, problem-solving approach, and alignment with Arsys ES's engineering culture (quality, performance, continuous improvement).

• Final Interview: Potentially with a senior engineering leader to discuss your overall fit, career aspirations, and how you can contribute to the company's goals.

Portfolio Review Tips:

• Quantify Performance Gains: For each project, clearly state the performance improvements achieved (e.g., "Reduced load time by 40%", "Achieved consistent 60fps during complex operations").

• Showcase Complex Rendering: Highlight projects where you've used Canvas API, Web Workers, or other advanced techniques. Explain the 'why' behind your technical choices.

• Demonstrate Problem-Solving: Select case studies that illustrate how you tackled specific performance bottlenecks or rendering challenges. Detail your thought process, iterative improvements, and final solution.

• Code Quality Emphasis: Be ready to discuss your approach to writing clean, maintainable, and performant code. If possible, provide links to public repositories or code samples.

• AI Tool Experience: If you've used AI tools effectively, be prepared to discuss specific examples of how they accelerated your work or improved outcomes, while also emphasizing your role in ensuring quality and correctness.

Challenge Preparation:

• Performance Bottleneck Analysis: Practice identifying performance issues in given code snippets or scenarios and propose solutions.

• Rendering Optimization Scenarios: Be ready to discuss how you would optimize a hypothetical slow-rendering component or application.

• JavaScript Algorithm Challenges: Brush up on common JavaScript algorithms and data structures, as these might be part of technical assessments.

• System Design for Performance: Consider how you would design a feature or application with performance as a primary constraint.

📝 Enhancement Note: The interview process will heavily scrutinize your practical experience with performance optimization and rendering technologies. A strong, project-based portfolio that clearly demonstrates measurable results is critical.

🛠 Tools & Technology Stack

Primary Tools:

• Modern JavaScript (ESNext): The core language for development.

• HTML5 & CSS3: For structuring and styling web applications, with an emphasis on performance-oriented CSS.

• Canvas API: For custom, high-performance rendering.

• Web Workers: For offloading tasks from the main thread.

• Frontend Framework/Library: While not explicitly stated, it's highly probable they use a modern framework like React, Vue, or Angular, or a custom internal framework optimized for performance.

• AI-Assisted Development Tools: Explicitly mentioned, with examples like Cursor. This indicates integration into the daily workflow.

Analytics & Reporting:

• Browser Developer Tools: Essential for performance profiling, debugging, and inspecting DOM/rendering behavior (e.g., Chrome DevTools, Firefox Developer Tools).

• Performance Monitoring Tools: Potentially tools like Lighthouse, WebPageTest, or integrated APM (Application Performance Monitoring) solutions for tracking real-time performance metrics.

• Analytics Platforms: Tools for tracking user interactions and application usage, which can indirectly inform performance improvements.

CRM & Automation:

• Version Control Systems: Git (likely via GitHub, GitLab, or Bitbucket) for code management and collaboration.

• Build Tools/Bundlers: Tools like Webpack, Vite, or Rollup for optimizing frontend assets.

• CI/CD Pipelines: For automated testing and deployment, ensuring consistent quality and efficient releases.

📝 Enhancement Note: The technology stack heavily emphasizes client-side performance. Candidates should be comfortable with browser APIs, JavaScript's performance characteristics, and modern frontend tooling. The explicit mention of AI tools is a key differentiator.

👥 Team Culture & Values

Operations Values:

• Quality: A paramount focus on delivering high-quality, robust, and bug-free code, especially critical for performance-sensitive applications.

• Performance: Deep commitment to achieving and maintaining optimal application speed, responsiveness, and efficiency, with a "60fps mindset."

• Continuous Improvement: A culture that encourages ongoing learning, experimentation with new technologies (like AI tools), and iterative refinement of processes and code.

• Pragmatism & Execution: A focus on delivering tangible results and solving problems effectively, with a bias for action.

• Collaboration: Working effectively within a team, sharing knowledge, and supporting colleagues to achieve collective goals.

Collaboration Style:

• Cross-Functional Integration: Close collaboration with backend engineers, product managers, and designers to ensure features are performant, functional, and meet user needs.

• Process Review & Feedback: An environment where code reviews are standard, and constructive feedback is exchanged to improve code quality and share best practices.

• Knowledge Sharing: Encouraging team members to share insights on performance optimization, new tools, and effective development strategies, potentially through internal tech talks or documentation.

📝 Enhancement Note: The core values revolve around technical excellence, efficiency, and a forward-thinking approach to development. Engineers who thrive in environments that prioritize deep technical work and continuous learning will find this appealing.

⚡ Challenges & Growth Opportunities

Challenges:

• Complex Rendering Logic: Transforming traditional DOM-driven applications into highly performant, Canvas-based or hardware-accelerated experiences presents significant architectural and implementation challenges.

• Maintaining 60fps Under Load: Ensuring consistent high frame rates with complex documents, spreadsheets, and interactive elements under heavy user load requires sophisticated optimization techniques.

• Integrating AI Tools Effectively: Leveraging AI tools to boost productivity without sacrificing code quality, security, or performance requires careful oversight and a pragmatic approach.

• Modernizing Legacy CSS: Refactoring large, potentially complex CSS codebases into a modern, variable-based system while maintaining design integrity and performance.

• Cross-Browser and Device Performance: Ensuring consistent high performance across a wide range of browsers, devices, and operating systems.

Learning & Development Opportunities:

• Advanced Frontend Performance Mastery: Opportunity to become an expert in cutting-edge frontend performance techniques, including browser rendering pipelines, GPU acceleration, and advanced JavaScript optimizations.

• Deep Dive into Rendering Technologies: Gain extensive experience with Canvas API, potentially WebGL, and explore emerging technologies that push the boundaries of web rendering.

• AI in Development: Become proficient in using AI as a powerful tool in the software development lifecycle, understanding its strengths and limitations.

• Product-Specific Expertise: Develop deep knowledge of Nextcloud Office and its specific technical challenges, contributing to a specialized product.

• Mentorship and Technical Leadership: As a mid-level engineer, opportunities to mentor junior colleagues and contribute to technical decision-making processes.

📝 Enhancement Note: The challenges are substantial and directly related to pushing the boundaries of web application performance. The growth opportunities are geared towards deep technical expertise and leadership within a specialized domain.

💡 Interview Preparation

Strategy Questions:

• Operations Strategy: "Describe a time you significantly improved the performance of a web application. What metrics did you track, what techniques did you use, and what was the outcome?" (Prepare a case study focusing on measurable results and technical depth).

• Collaboration & Stakeholder Management: "How do you collaborate with backend engineers to optimize data fetching and rendering for a complex UI? How do you communicate performance issues and trade-offs to non-technical stakeholders?" (Focus on clear communication, data-driven arguments, and proactive problem-solving).

• Problem-Solving: "Imagine a scenario where a user reports extreme slowness when interacting with a spreadsheet containing many formulas and conditional formatting. How would you diagnose and address this performance bottleneck?" (Outline a systematic diagnostic approach, identifying potential areas of concern like DOM complexity, inefficient rendering, or heavy JavaScript computation).

Company & Culture Questions:

• "What interests you about working on Nextcloud Office specifically, and what do you know about its current performance characteristics?" (Research Nextcloud Office, its features, and common user feedback on performance).

• "How do you see yourself contributing to a culture focused on quality and performance?" (Discuss your personal work ethic, attention to detail, and passion for technical excellence).

Portfolio Presentation Strategy:

• Structure Your Case Studies: For each project, clearly outline: The Problem/Challenge, Your Approach/Solution, The Technologies Used, The Results (quantified performance improvements), and Lessons Learned.

• Focus on Performance Metrics: Be ready to discuss specific metrics like FPS, load times, memory usage, CPU utilization, and how you improved them.

• Walk Through Technical Decisions: Explain why you chose certain technologies or approaches, especially for rendering and performance optimization. For example, why Canvas over DOM, or why Web Workers for a specific task.

• Demonstrate Problem-Solving Flow: Show how you approached a complex problem, including debugging, experimentation, and iteration.

• Highlight AI Integration (if applicable): If you used AI tools, explain how they assisted your process and what your role was in validating and refining the output.

📝 Enhancement Note: Prepare to demonstrate not just your coding skills, but your systematic approach to performance analysis and optimization, backed by concrete examples and measurable outcomes.

📌 Application Steps

To apply for this Frontend Engineer position:

• Submit your application through the provided link on Greenhouse.

• Customize Your Resume: Tailor your resume to highlight experience with JavaScript (ESNext), DOM performance, Canvas API, Web Workers, CSS optimization, and any AI development tools you've used. Quantify your achievements with metrics whenever possible.

• Prepare Your Portfolio: Curate 2-3 of your strongest projects that showcase advanced frontend performance optimization. Be ready to present them, focusing on the technical challenges, your solutions, and the measurable impact on performance.

• Practice Interview Questions: Rehearse answers to common technical and behavioral questions, focusing on performance-related scenarios and your problem-solving methodology. Prepare to discuss your thought process for a hypothetical performance issue.

• Research Arsys ES & Nextcloud Office: Understand the company's mission, values, and the specific product you'll be working on. Familiarize yourself with Nextcloud Office and potential areas for performance enhancement.

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

---