Posts Tagged ‘Filters’
[SpringIO2023] Beyond Routing: Spring Cloud Gateway with Style by Abel Salgado & Marta Medio
At Spring I/O 2023, Abel Salgado and Marta Medio, seasoned engineers from VMware, delivered an engaging session on elevating Spring Cloud Gateway beyond basic routing. Through practical, real-world examples and live demos, they showcased how to customize Spring Cloud Gateway with filters to address complex enterprise needs, such as security integrations and response modifications. Their talk demystified the gateway’s reactive stack, offering tips to avoid pitfalls and encouraging developers to harness its flexibility for performant, modular solutions.
Understanding Spring Cloud Gateway’s Power
Abel and Marta began by positioning Spring Cloud Gateway as a reactive, high-performance component that sits between clients and upstream services, enabling request and response manipulation. Unlike a one-to-one gateway tutorial, their session assumed basic familiarity, focusing on advanced customizations. They highlighted the gateway’s filter-based architecture, where filters operate in a chain, processing requests and responses in a defined order. This modularity allows developers to inject cross-cutting concerns like security or logging without altering upstream services. The duo emphasized the gateway’s potential to modernize legacy systems or split monoliths, making it a strategic tool for enterprise architectures.
Custom Filters for Security Integration
A key demo showcased how to implement OAuth security using Spring Cloud Gateway filters, integrating with Okta for token validation. Abel demonstrated two filters: one validating OAuth tokens using Spring Security’s resource server configuration, and another extracting claims (e.g., username) from the token to forward as HTTP headers to an upstream service unaware of OAuth. This approach isolates security logic in the gateway, sparing upstream services from modification. The demo, scripted with HTTPbin as the upstream service, illustrated a real-world scenario where a client authenticates with Okta, sends a token to the gateway, and receives a response with enriched headers. Abel stressed avoiding manual token validation, leveraging Spring Security’s reactive components to ensure performance and maintainability.
Dynamic Configuration and Response Modification
Marta explored the gateway’s configuration flexibility, demonstrating how to parametrize filters dynamically via YAML. A simple filter adding request headers was enhanced to accept multiple header configurations, reducing the need for multiple filter instances and improving performance. In a more complex example, Marta tackled modifying JSON responses from an upstream service, a common requirement when legacy APIs cannot be altered. Using a custom converter and the ModifyResponseBodyFilter, she transformed JSON fields based on YAML-defined key-value pairs, processing the response once to optimize performance. Marta cautioned about the performance risks of response modification, urging developers to carefully design configurations for scalability.
Best Practices and Community Insights
Abel and Marta concluded with practical advice for Spring Cloud Gateway adoption. They advocated for modular filter design to encapsulate features, enabling easy composition via YAML or actuator endpoints for runtime updates. They warned against reinventing solutions, citing cases where developers manually parsed JWTs instead of using Spring Security. The duo recommended reactive Spring libraries to avoid blocking issues and highlighted the gateway’s testing challenges, pointing to their GitHub repository for code examples. A nod to Spencer Gibb’s announcement about exploring MVC support for Spring Cloud Gateway underscored the project’s evolving potential. Their session inspired attendees to experiment with the gateway’s capabilities, leveraging its documentation and community resources.
Links:
[DotCSS2018] DotCSS 2018: Sara Soueidan – Unleashing Creativity with SVG Filters
Sara Soueidan, a renowned web developer and advocate for SVG, delivered a captivating crash course on SVG filters at DotCSS 2018. Her presentation highlights the transformative potential of SVG filters, which enable developers to achieve Photoshop-grade effects directly in the browser. By comparing SVG capabilities to traditional graphic design tools, Sara inspires developers to push the boundaries of web creativity.
SVG Filters vs. CSS Filters
Sara begins by contrasting CSS filters with their SVG counterparts. While CSS filters, such as blur(), offer basic image manipulation, SVG filters provide far greater flexibility. For instance, SVG’s feGaussianBlur allows directional blurring (horizontal or vertical), enabling effects like motion blur that CSS cannot replicate. This distinction stems from SVG’s ability to chain multiple filter primitives—operations like feImage, feColorMatrix, and feBlend—to create complex, layered effects.
Sara’s enthusiasm for SVG filters is grounded in their ability to bridge the gap between print and web design. By leveraging SVG’s robust feature set, developers can emulate sophisticated graphic design techniques, making the web a more expressive medium.
Crafting Photoshop-Like Effects
To illustrate SVG’s power, Sara walks through two practical examples: a displacement map effect and a duotone image effect. In the displacement map example, she replicates a Photoshop tutorial by desaturating an image, applying a slight blur, and using it to distort text, mimicking the texture of fabric. This process involves primitives like feImage for texture application, feColorMatrix for desaturation, and feDisplacementMap for distortion, culminating in a realistic effect enhanced by blend modes.
The duotone effect follows a similar logic, transforming a grayscale image into a two-color gradient map using feComponentTransfer. By manipulating RGB channels, developers can map grayscale values to custom colors, creating striking visual effects. Sara’s examples demonstrate how SVG filters can replicate Photoshop workflows, empowering developers to craft visually rich interfaces.