Reusing features across multiple stacks. A story of trade-offs and approach choices to make it easy to run features independent of the tech stack in which they are running.
Building Composable Serverless Apps with IOpipe Erica Windisch
Â
Serverless functions being stateless exist to connect and glue together services. Using a Unix-pipe-like model we can chain together simple composable pieces to build complex applications that may be run anywhere, including AWS Lambda, Google Cloud Functions, and Azure Functions.
-- Presented in Serverless Summit 2017 - www.inserverless.com --
The earlier sessions at this conference covered development scenarios & operations, frameworks/platforms, and technology applications. In this session, I'll tie them together to provide a perspective on architectures and patterns for serverless. I'll cover how serverless compute can be used as glue or backend, legacy API proxy, or do real-time processing. Further, I'll discuss how serverless can be employed for web applications, batch processing, stream processing and event-driven automation, at a high level.
Slide presentasi ini dibuat oleh Petra Novandi Barus sebagai pemateri di acara Dapur Startup Bandung Developer Day pada 29 Juli 2016 di Dicoding Space Bandung
API Design in the Modern Era - Architecture Next 2020Eran Stiller
Â
APIs are at the heart of the modern software development world. Whether we author a distributed system, a microservices-based application, or a simple client-server n-tier application - our system will most probably expose an API at its core. APIs are a means to expose the functionality of a particular component to its users. Unsurprisingly, many formats for APIs have existed over the years, with the industry setting around RESTful APIs as the de-facto standard, with gRPC growing in popularity.
Join me in this session, as I review today's most popular API formats and their relative strengths and weaknesses. From REST, through OpenAPI, via gRPC and to the rising star of AsyncAPI - we'll explain how these API formats work and the tools they employ and offer some guidance as towards when we should use each. At the end of this session, you'll have a good familiarity with these formats, and you'll be in a much better position to choose between them.
Building Composable Serverless Apps with IOpipe Erica Windisch
Â
Serverless functions being stateless exist to connect and glue together services. Using a Unix-pipe-like model we can chain together simple composable pieces to build complex applications that may be run anywhere, including AWS Lambda, Google Cloud Functions, and Azure Functions.
-- Presented in Serverless Summit 2017 - www.inserverless.com --
The earlier sessions at this conference covered development scenarios & operations, frameworks/platforms, and technology applications. In this session, I'll tie them together to provide a perspective on architectures and patterns for serverless. I'll cover how serverless compute can be used as glue or backend, legacy API proxy, or do real-time processing. Further, I'll discuss how serverless can be employed for web applications, batch processing, stream processing and event-driven automation, at a high level.
Slide presentasi ini dibuat oleh Petra Novandi Barus sebagai pemateri di acara Dapur Startup Bandung Developer Day pada 29 Juli 2016 di Dicoding Space Bandung
API Design in the Modern Era - Architecture Next 2020Eran Stiller
Â
APIs are at the heart of the modern software development world. Whether we author a distributed system, a microservices-based application, or a simple client-server n-tier application - our system will most probably expose an API at its core. APIs are a means to expose the functionality of a particular component to its users. Unsurprisingly, many formats for APIs have existed over the years, with the industry setting around RESTful APIs as the de-facto standard, with gRPC growing in popularity.
Join me in this session, as I review today's most popular API formats and their relative strengths and weaknesses. From REST, through OpenAPI, via gRPC and to the rising star of AsyncAPI - we'll explain how these API formats work and the tools they employ and offer some guidance as towards when we should use each. At the end of this session, you'll have a good familiarity with these formats, and you'll be in a much better position to choose between them.
.NET MAUI with .NET 6 (December 2021, Preview 10)Alex Pshul
Â
.NET Multi-platform App UI (.NET MAUI) is a cross-platform framework for creating native mobile and desktop apps with C# and XAML. Using .NET MAUI, you can develop apps that can run on Android, iOS, iPadOS, macOS, and Windows from a single shared codebase. .NET MAUI is the best way to build cross platform mobile and desktop apps with .NET and C#.
Join me to an all-hands-on session and get a first look of .NET MAUI in .NET 6 and learn how you can start using it today.
Nowadays, it is quite common to have build infrastructure that, on every change in a repository, builds your software and runs all your tests. However this is where most development teams stop. This talk demonstrates how you can consistently deploy systems from development to testing, staging and production.
With Bndtools we semantically version bundles in the Eclipse IDE. The continuous build is setup to automatically deploy to a bundle repository and create snapshots of changed bundles compared to a baselined version that is available in a release repository. By hooking up these repositories to Apache ACE, such updates can instantly be deployed to systems in different configurations, allowing you to deploy new features to QA systems, beta users and finally roll them out to all other customers.
This presentation was given at ApacheCon NA 2014, Denver.
Introduction to deploying your ASP.NET Core application to a variety of different environments (Windows, Linux, Mac, Azure, Docker) and hosting servers (IIS, IIS Express, Kestrel).
This talk was given at the following locale:
- DetroitDevDay (November 12, 2016)
Tomasz Janczuk - WebtaskalifragilistexpialidociousServerlessConf
Â
Presented at ServerlessConf NYC2016.
The [webtask.io](https://webtask.io) microservice platform has been created and is used internally at [Auth0](https://auth0.com) to support multi-tenant SaaS extensibility through custom code, in cloud and on-premise. In this talk I will describe our journey from the driving scenario, the choice of a "better web hook" paradigm to address it, the architecture and design decisions we've made along with the mistakes and changes the system has undergone. I will also provide an insight into a security model that makes webtask.io platform uniquely suited to be used directly over HTTP from HTML5 or mobile apps. Docker, Node, ZeroMQ, Mongo, and more.
Our customers want a stable, performant application that delivers new features every week, and we discovered that leveraging the AWS Fargate service fits our customers' needs better. This talk covers our journey to Fargate, the changes we've made to our dev-workflow, and how the teams were able to deploy their application using GitLab CI/CD : everything from the code all the way to the customer.
Chris Anderson and Yochay Kiriaty - Serverless Patterns with Azure FunctionsServerlessConf
Â
Presented at ServerlessConf NYC 2016.
The future of cloud development is Serverless. Sure, there will always be those whom insist on provisioning and managing VMs, but in few short years majority of developers will default to Serverless architecture when building cloud applications. Join Chris Anderson and Yochay Kiriaty for this demo heavy session describing existing and emerging Serverless patterns.
Presentation for Stichting DotNed in 2015:
Microsoft neemt ASP.NET op de schop. Het web applicatie framework uit .NET 1.0 wordt grotendeels herschreven om te voldoen aan de eisen die men tegenwoordig stelt aan het realiseren van een moderne web applicatie. Deze sessie kijken we naar de nieuwe opzet van ASP.NET. We zien hoe Microsoft daarmee een cloud geoptimaliseerd, cross-platform framework creeert, dat zij zelf sneller kunnen laten evolueren door kortere release cycles. Dit alles betekent wel dat ASP.NET anders is geworden. In deze sessie leer je daarom ook wat er is veranderd, hoe je aan de slag gaat en waarom ASP.NET vNext een revolutionaire stap is in Microsoft's framework.
Serverless is a hot trend but are you taking full advantage of all the productivity and scalability benefits serverless architectures have to offer? In this session you will learn about the best practices for building serverless applications â both for architectural patterns using various Azure services as well as for tools to accelerate development.
This is Part 1 of a 2-part series where we would be discussing improvements of ASP.NET Core when moving from ASP.MVC. Part 2 would be a deep dive topic where detailed performance improvements report would be discussed and shared with the crowd.
A story of how I built an entire system not using a single server to host it, but serving everything in the cloud.
#IoT #Serverless #Reactjs #Redux #Nodejs #AWSLamdba
How to build and deploy an ASP.NET applicaton.
This entire series can be found here: http://www.davevoyles.com/slides-and-code-for-my-asp-net-presentation/
.NET MAUI with .NET 6 (December 2021, Preview 10)Alex Pshul
Â
.NET Multi-platform App UI (.NET MAUI) is a cross-platform framework for creating native mobile and desktop apps with C# and XAML. Using .NET MAUI, you can develop apps that can run on Android, iOS, iPadOS, macOS, and Windows from a single shared codebase. .NET MAUI is the best way to build cross platform mobile and desktop apps with .NET and C#.
Join me to an all-hands-on session and get a first look of .NET MAUI in .NET 6 and learn how you can start using it today.
Nowadays, it is quite common to have build infrastructure that, on every change in a repository, builds your software and runs all your tests. However this is where most development teams stop. This talk demonstrates how you can consistently deploy systems from development to testing, staging and production.
With Bndtools we semantically version bundles in the Eclipse IDE. The continuous build is setup to automatically deploy to a bundle repository and create snapshots of changed bundles compared to a baselined version that is available in a release repository. By hooking up these repositories to Apache ACE, such updates can instantly be deployed to systems in different configurations, allowing you to deploy new features to QA systems, beta users and finally roll them out to all other customers.
This presentation was given at ApacheCon NA 2014, Denver.
Introduction to deploying your ASP.NET Core application to a variety of different environments (Windows, Linux, Mac, Azure, Docker) and hosting servers (IIS, IIS Express, Kestrel).
This talk was given at the following locale:
- DetroitDevDay (November 12, 2016)
Tomasz Janczuk - WebtaskalifragilistexpialidociousServerlessConf
Â
Presented at ServerlessConf NYC2016.
The [webtask.io](https://webtask.io) microservice platform has been created and is used internally at [Auth0](https://auth0.com) to support multi-tenant SaaS extensibility through custom code, in cloud and on-premise. In this talk I will describe our journey from the driving scenario, the choice of a "better web hook" paradigm to address it, the architecture and design decisions we've made along with the mistakes and changes the system has undergone. I will also provide an insight into a security model that makes webtask.io platform uniquely suited to be used directly over HTTP from HTML5 or mobile apps. Docker, Node, ZeroMQ, Mongo, and more.
Our customers want a stable, performant application that delivers new features every week, and we discovered that leveraging the AWS Fargate service fits our customers' needs better. This talk covers our journey to Fargate, the changes we've made to our dev-workflow, and how the teams were able to deploy their application using GitLab CI/CD : everything from the code all the way to the customer.
Chris Anderson and Yochay Kiriaty - Serverless Patterns with Azure FunctionsServerlessConf
Â
Presented at ServerlessConf NYC 2016.
The future of cloud development is Serverless. Sure, there will always be those whom insist on provisioning and managing VMs, but in few short years majority of developers will default to Serverless architecture when building cloud applications. Join Chris Anderson and Yochay Kiriaty for this demo heavy session describing existing and emerging Serverless patterns.
Presentation for Stichting DotNed in 2015:
Microsoft neemt ASP.NET op de schop. Het web applicatie framework uit .NET 1.0 wordt grotendeels herschreven om te voldoen aan de eisen die men tegenwoordig stelt aan het realiseren van een moderne web applicatie. Deze sessie kijken we naar de nieuwe opzet van ASP.NET. We zien hoe Microsoft daarmee een cloud geoptimaliseerd, cross-platform framework creeert, dat zij zelf sneller kunnen laten evolueren door kortere release cycles. Dit alles betekent wel dat ASP.NET anders is geworden. In deze sessie leer je daarom ook wat er is veranderd, hoe je aan de slag gaat en waarom ASP.NET vNext een revolutionaire stap is in Microsoft's framework.
Serverless is a hot trend but are you taking full advantage of all the productivity and scalability benefits serverless architectures have to offer? In this session you will learn about the best practices for building serverless applications â both for architectural patterns using various Azure services as well as for tools to accelerate development.
This is Part 1 of a 2-part series where we would be discussing improvements of ASP.NET Core when moving from ASP.MVC. Part 2 would be a deep dive topic where detailed performance improvements report would be discussed and shared with the crowd.
A story of how I built an entire system not using a single server to host it, but serving everything in the cloud.
#IoT #Serverless #Reactjs #Redux #Nodejs #AWSLamdba
How to build and deploy an ASP.NET applicaton.
This entire series can be found here: http://www.davevoyles.com/slides-and-code-for-my-asp-net-presentation/
Encapsulating functionality: Web Components â set of new standards from Google. Itâs time to adopt or maybe look back? Itâs seems, we have had something similar, or it is absolutely different? JSF components â Oh, no! Or give a chance? Go forward to a clientâs browser or review new features in server? How to start using Polymer under Spring Boot or maybe it will be PrimeFaces. Glance from back-end (and slightly manager) perspectives.
React Js Basic Details and Descriptions
Frontend Javascript Library, to make decent SPA
The fastest way to build a segregated component based front end for software development.
In this Presentation all type of JS frameworks are discussed and by viewing this you can compare that which is the best JS framework in present time for different different purposes.
Albiorix Technology lists out the best Javascript frameworks to use in 2023. Learn more about selecting the proper Javascript framework for your business needs.
For More Information: https://www.albiorixtech.com/blog/best-javascript-frameworks/
#JavaScript #JavaScriptFrameworks #WebAppDevelopment #MobileAppDevelopment #SoftwareDevelopment
The Hotstar web team attended JSFoo 2017 conference. Here are some of the key takeaways. Some of the technologies excited us and some we believe have a business impact.
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...Juraj Vysvader
Â
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I didn't get rich from it but it did have 63K downloads (powered possible tens of thousands of websites).
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?XfilesPro
Â
Worried about document security while sharing them in Salesforce? Fret no more! Here are the top-notch security standards XfilesPro upholds to ensure strong security for your Salesforce documents while sharing with internal or external people.
To learn more, read the blog: https://www.xfilespro.com/how-does-xfilespro-make-document-sharing-secure-and-seamless-in-salesforce/
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...Shahin Sheidaei
Â
Games are powerful teaching tools, fostering hands-on engagement and fun. But they require careful consideration to succeed. Join me to explore factors in running and selecting games, ensuring they serve as effective teaching tools. Learn to maintain focus on learning objectives while playing, and how to measure the ROI of gaming in education. Discover strategies for pitching gaming to leadership. This session offers insights, tips, and examples for coaches, team leads, and enterprise leaders seeking to teach from simple to complex concepts.
Cyaniclab : Software Development Agency Portfolio.pdfCyanic lab
Â
CyanicLab, an offshore custom software development company based in Sweden,India, Finland, is your go-to partner for startup development and innovative web design solutions. Our expert team specializes in crafting cutting-edge software tailored to meet the unique needs of startups and established enterprises alike. From conceptualization to execution, we offer comprehensive services including web and mobile app development, UI/UX design, and ongoing software maintenance. Ready to elevate your business? Contact CyanicLab today and let us propel your vision to success with our top-notch IT solutions.
Globus Compute wth IRI Workflows - GlobusWorld 2024Globus
Â
As part of the DOE Integrated Research Infrastructure (IRI) program, NERSC at Lawrence Berkeley National Lab and ALCF at Argonne National Lab are working closely with General Atomics on accelerating the computing requirements of the DIII-D experiment. As part of the work the team is investigating ways to speedup the time to solution for many different parts of the DIII-D workflow including how they run jobs on HPC systems. One of these routes is looking at Globus Compute as a way to replace the current method for managing tasks and we describe a brief proof of concept showing how Globus Compute could help to schedule jobs and be a tool to connect compute at different facilities.
SOCRadar Research Team: Latest Activities of IntelBrokerSOCRadar
Â
The European Union Agency for Law Enforcement Cooperation (Europol) has suffered an alleged data breach after a notorious threat actor claimed to have exfiltrated data from its systems. Infamous data leaker IntelBroker posted on the even more infamous BreachForums hacking forum, saying that Europol suffered a data breach this month.
The alleged breach affected Europol agencies CCSE, EC3, Europol Platform for Experts, Law Enforcement Forum, and SIRIUS. Infiltration of these entities can disrupt ongoing investigations and compromise sensitive intelligence shared among international law enforcement agencies.
However, this is neither the first nor the last activity of IntekBroker. We have compiled for you what happened in the last few days. To track such hacker activities on dark web sources like hacker forums, private Telegram channels, and other hidden platforms where cyber threats often originate, you can check SOCRadarâs Dark Web News.
Stay Informed on Threat Actorsâ Activity on the Dark Web with SOCRadar!
First Steps with Globus Compute Multi-User EndpointsGlobus
Â
In this presentation we will share our experiences around getting started with the Globus Compute multi-user endpoint. Working with the Pharmacology group at the University of Auckland, we have previously written an application using Globus Compute that can offload computationally expensive steps in the researcher's workflows, which they wish to manage from their familiar Windows environments, onto the NeSI (New Zealand eScience Infrastructure) cluster. Some of the challenges we have encountered were that each researcher had to set up and manage their own single-user globus compute endpoint and that the workloads had varying resource requirements (CPUs, memory and wall time) between different runs. We hope that the multi-user endpoint will help to address these challenges and share an update on our progress here.
Listen to the keynote address and hear about the latest developments from Rachana Ananthakrishnan and Ian Foster who review the updates to the Globus Platform and Service, and the relevance of Globus to the scientific community as an automation platform to accelerate scientific discovery.
Exploring Innovations in Data Repository Solutions - Insights from the U.S. G...Globus
Â
The U.S. Geological Survey (USGS) has made substantial investments in meeting evolving scientific, technical, and policy driven demands on storing, managing, and delivering data. As these demands continue to grow in complexity and scale, the USGS must continue to explore innovative solutions to improve its management, curation, sharing, delivering, and preservation approaches for large-scale research data. Supporting these needs, the USGS has partnered with the University of Chicago-Globus to research and develop advanced repository components and workflows leveraging its current investment in Globus. The primary outcome of this partnership includes the development of a prototype enterprise repository, driven by USGS Data Release requirements, through exploration and implementation of the entire suite of the Globus platform offerings, including Globus Flow, Globus Auth, Globus Transfer, and Globus Search. This presentation will provide insights into this research partnership, introduce the unique requirements and challenges being addressed and provide relevant project progress.
top nidhi software solution freedownloadvrstrong314
Â
This presentation emphasizes the importance of data security and legal compliance for Nidhi companies in India. It highlights how online Nidhi software solutions, like Vector Nidhi Software, offer advanced features tailored to these needs. Key aspects include encryption, access controls, and audit trails to ensure data security. The software complies with regulatory guidelines from the MCA and RBI and adheres to Nidhi Rules, 2014. With customizable, user-friendly interfaces and real-time features, these Nidhi software solutions enhance efficiency, support growth, and provide exceptional member services. The presentation concludes with contact information for further inquiries.
Enhancing Research Orchestration Capabilities at ORNL.pdfGlobus
Â
Cross-facility research orchestration comes with ever-changing constraints regarding the availability and suitability of various compute and data resources. In short, a flexible data and processing fabric is needed to enable the dynamic redirection of data and compute tasks throughout the lifecycle of an experiment. In this talk, we illustrate how we easily leveraged Globus services to instrument the ACE research testbed at the Oak Ridge Leadership Computing Facility with flexible data and task orchestration capabilities.
Climate Science Flows: Enabling Petabyte-Scale Climate Analysis with the Eart...Globus
Â
The Earth System Grid Federation (ESGF) is a global network of data servers that archives and distributes the planetâs largest collection of Earth system model output for thousands of climate and environmental scientists worldwide. Many of these petabyte-scale data archives are located in proximity to large high-performance computing (HPC) or cloud computing resources, but the primary workflow for data users consists of transferring data, and applying computations on a different system. As a part of the ESGF 2.0 US project (funded by the United States Department of Energy Office of Science), we developed pre-defined data workflows, which can be run on-demand, capable of applying many data reduction and data analysis to the large ESGF data archives, transferring only the resultant analysis (ex. visualizations, smaller data files). In this talk, we will showcase a few of these workflows, highlighting how Globus Flows can be used for petabyte-scale climate analysis.
How to Position Your Globus Data Portal for Success Ten Good PracticesGlobus
Â
Science gateways allow science and engineering communities to access shared data, software, computing services, and instruments. Science gateways have gained a lot of traction in the last twenty years, as evidenced by projects such as the Science Gateways Community Institute (SGCI) and the Center of Excellence on Science Gateways (SGX3) in the US, The Australian Research Data Commons (ARDC) and its platforms in Australia, and the projects around Virtual Research Environments in Europe. A few mature frameworks have evolved with their different strengths and foci and have been taken up by a larger community such as the Globus Data Portal, Hubzero, Tapis, and Galaxy. However, even when gateways are built on successful frameworks, they continue to face the challenges of ongoing maintenance costs and how to meet the ever-expanding needs of the community they serve with enhanced features. It is not uncommon that gateways with compelling use cases are nonetheless unable to get past the prototype phase and become a full production service, or if they do, they don't survive more than a couple of years. While there is no guaranteed pathway to success, it seems likely that for any gateway there is a need for a strong community and/or solid funding streams to create and sustain its success. With over twenty years of examples to draw from, this presentation goes into detail for ten factors common to successful and enduring gateways that effectively serve as best practices for any new or developing gateway.
Strategies for Successful Data Migration Tools.pptxvarshanayak241
Â
Data migration is a complex but essential task for organizations aiming to modernize their IT infrastructure and leverage new technologies. By understanding common challenges and implementing these strategies, businesses can achieve a successful migration with minimal disruption. Data Migration Tool like Ask On Data play a pivotal role in this journey, offering features that streamline the process, ensure data integrity, and maintain security. With the right approach and tools, organizations can turn the challenge of data migration into an opportunity for growth and innovation.
Large Language Models and the End of ProgrammingMatt Welsh
Â
Talk by Matt Welsh at Craft Conference 2024 on the impact that Large Language Models will have on the future of software development. In this talk, I discuss the ways in which LLMs will impact the software industry, from replacing human software developers with AI, to replacing conventional software with models that perform reasoning, computation, and problem-solving.
Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...informapgpstrackings
Â
Keep tabs on your field staff effortlessly with Informap Technology Centre LLC. Real-time tracking, task assignment, and smart features for efficient management. Request a live demo today!
For more details, visit us : https://informapuae.com/field-staff-tracking/
Into the Box Keynote Day 2: Unveiling amazing updates and announcements for modern CFML developers! Get ready for exciting releases and updates on Ortus tools and products. Stay tuned for cutting-edge innovations designed to boost your productivity.
Check out the webinar slides to learn more about how XfilesPro transforms Salesforce document management by leveraging its world-class applications. For more details, please connect with sales@xfilespro.com
If you want to watch the on-demand webinar, please click here: https://www.xfilespro.com/webinars/salesforce-document-management-2-0-smarter-faster-better/
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoamtakuyayamamoto1800
Â
In this slide, we show the simulation example and the way to compile this solver.
In this solver, the Helmholtz equation can be solved by helmholtzFoam. Also, the Helmholtz equation with uniformly dispersed bubbles can be simulated by helmholtzBubbleFoam.
8. A common evolving tech stack of successful frontend apps
BackboneJS
Models
Views
Router
Sync (api communication)
BackboneJS
Models
Views
Router
Sync (api communication)
ReactJS
View layer for new features
Components
BackboneJS
Models
Views
Router
Sync (api communication)
ReactJS
View layer for new features
Components
Redux
State container
Used for new features
Today
201
2
9. Reusability
Horizontal reuse
â assets that tend to be utilities that are
generic to multiple applications (library)
Vertical reuse
â assets that are typically business
services, data services, business rules,
etc.
https://artofsoftwarereuse.com/2009/10/13/key-
differences-between-vertical-and-horizontal-reuse/
https://artofsoftwarereuse.com/2009/04/02/horizontal-
and-vertical-software-assets/
10. Characteristic Vertical Reuse Horizontal Reuse
Applicability Applications within a
specific domain or closely
related domains
Applicable across the board
for application regardless of
domain
Stakeholders Business stakeholders and
technology
Primarily technology. In
some cases support teams
provide input.
Variability Varies from well-defined to
open ended depending on
the complexity of the
domain.
Variations may not be
accurately captured in
reusable assets.
More well defined than
open-ended.
https://artofsoftwarereuse.com/2009/10/13/key-differences-between-vertical-and-horizontal-reuse/
11. Horizontal reuse
via âcoreâ library
is common
A core library can contain:
â Reusable presentation components (
inputs with labels, tables, application
menu, etc.) with styling
â Mixins
â Templates
â jQuery extensions
â Base classes meant for extension
â Reusable functionality (log in, tracking,
event bus, etc.)
â ...
Application Application
Core library
12. Horizontal reuse
via âcoreâ library
is common
A core library:
â Leads to unpredictable results because
it provides mostly reusable parts that
would be integrated as it makes sense
to each application
â Doesnât enforce consistency
â Versioning, if attempted, is not trivial
â Limits tech stack choices
Application Application
Core library
13. A âcoreâ library that only works with some of our current-gen apps, it was extracted some time ago to
help reduce the number of features reimplemented for each application.
Backbone
React
Backbone
React
Core
Vaadin/Java
.net
Js Framework
Angular, Ember
Reusable âcoreâ lib is tricky when you have a large number of successful applications
14. First go at
Reusable components
Application specific are container
components that implement business
requirements using presentation
components. These are unique per
application and can be considered not
portable.
Business Component are extracted
from existing application specific
components and are, to a degree,
portable between applications.
Toolkit Components are immediately
available in any application.
15. Common ways of building web apps in our industry
Single Page Application
[Frontend Team]
Server Application
[Backend / Devops Team]
Single Page Application
[Frontend Team]
Aggregation Layer
[BFF, GraphQL]
Service
[Backend /
Devops]
Service
[Backend /
Devops]
Frontend
Team
Backend
Team
Devops
Team
TeamFeature
[Specificmission]
TeamFeature
[Specificmission]
TeamFeature
[Specificmission]
API + RICH CLIENT SOA + RICH CLIENT FEATURE TEAMS
USING
MICRO-FRONTENDS
17. WebComponents
Standard with strict boundaries that
works with any tech stack.
En ensemble of open web
technologies that permit the creation
of reusable user interface widgets.
https://www.webcomponents.org/specs
Backbone
React
Backbone
React
WebComponent
Vaadin/Java
.net
Js Framework
Angular, Ember
18. The WebComponents standard
Web components are based on four main specifications:
1. Custom Elements
â The Custom Elements specification lays the foundation for designing and using new types
of DOM elements.
2. Shadow DOM
â The shadow DOM specification defines how to use encapsulated style and markup in web
components.
3. HTML imports
â The HTML imports specification defines the inclusion and reuse of HTML documents in
other HTML documents.
4. HTML Template
â The HTML template element specification defines how to declare fragments of markup
that go unused at page load, but can be instantiated later on at runtime.
19. The WebComponents standard is plagued with problems
Polymer is moving to Javascript modules because the current HTML Import
spec is dead
Chrome implemented features eagerly but most browsers donât agree on the
implementation specifications
â Chrome 36+/Opera 20+ implemented a previous version of Custom
Elements (v0) that used .registerElement(). Other browsers are
implementing v1, window.customElements.define().
â Shadow DOM is considered for implementation by IE team
â HTML Templates are the best supported but they are a lot slower than
framework specific templates (handlebars, react code)
20. GlimmerJS
Glimmer.js is an open source
JavaScript library for building UI
components for the web.
It is built on the same rendering
engine as Ember.js. Itâs a UI layerâ
no routing, data loading, or other
features.
Glimmer components can be
booted up as Web Components.
https://glimmerjs.com/
https://engineering.linkedin.com/blog/2017/12/the-
glimmer-binary-experience
21. Glimmer was created primarily as a tool for building mobile Progressive Web
Applications and the exporter was an extra feature enabled by the small size.
The community is still discussing the strategy for delivering web components
[1]. However, the current implementation is sufficient for our goal of authoring
sharable components between different tech stacks.
1. https://github.com/glimmerjs/glimmer-web-component/issues/19
22. Ember-CLI
â Itâs a command line utility that
provides an asset pipeline, a
strong conventional project
structure, and a powerful
addon system for extension
â It ships with support for
blueprints. Blueprints are
snippet generators for entities
and itâs trivial to create custom
ones
https://ember-cli.com/
23. In the future*: npm install our way to Ember
*No date, but an important target of the community and in progress
https://github.com/emberjs/ember.js/issues/16301
24. WebComponents
With GlimmerJS
Glimmer doesnât produce web
components based on standards
in draft, itâs simply replacing a
custom element with appropriate
HTML generated by the Glimmer
library.
In the future, we can use
Glimmer components in Ember
without having to compile them
as WebComponents first.
Backbone
React
Backbone
React
GlimmerJS Applications
as WebComponent
Vaadin/Java
.net
Js Framework
Angular
EmberJS
Potentially use
without wrapping as
WebComponent
26. We follow selectively the Google best practices for working with web components
We follow events 100%:
1. Dispatch events in response to internal component activity.
2. Do not dispatch events in response to the host setting a property
(downward data flow).
We ignore recommendations for shadow DOM and styling.
We selectively follow recommendations for Attributes and properties.
[1] https://developers.google.com/web/fundamentals/architecture/building-components/best-practices
28. Google recommends[1] that developers should aim to keep primitive data attributes and
properties in sync, reflecting from property to attribute, and vice versa.
We donât support this at the moment and donât intend to:
â Partially because itâs complex to implement
â Partially because of a Glimmer limitation
Itâs a tradeoff that works because weâre using web components as application parts that
receive read-only configuration from parent and have internal state.
[1] https://developers.google.com/web/fundamentals/architecture/building-components/best-practices
29. Important GlimmerJS limitations and mitigations
Canât pass HTML attributes to the web
component
https://github.com/glimmerjs/glimmer-web-
component/issues/19
Because Glimmer replaces the custom
element with HTML it manages.
Weâre using a simple workaround.
Incomplete support for writing component tests Big problem. Weâre biting the bullet.
Very small ecosystem Surprisingly small problem because weâre
building small application parts.
Glimmer components are not 100% supported
in Ember
30. Working with complex data
Application
Components
Sub-ComponentSub-Component
Sub-ComponentSub-Component
Host Redux
Store
Internally we use the âData Down,
Action Upâ principle.
We accept rich data (objects,
arrays) through method calls or
properties using the DOM and we
donât reflect them.
Redux is not our default option but
we support hot-swapping the
internal store with one supplied by
the host application.
External EventConfiguration
31. âExternal eventsâ are CustomEvents.
In this case, the webcomponent would send a complex object describing the option
the user selected.
https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent
32. We use a React.Component
wrapper that:
â Sets configuration as HTML
attributes
â Listens to CustomEvents
dispatched by the
webcomponent and maybe
maps them to callbacks
â Controls re-rendering
34. Itâs a proxy between services
and a specific device.
It is tightly coupled to a
specific user experience and
is typically maintained by the
same team as the user
interface.
https://samnewman.io/patterns/archit
ectural/bff/
Backend For
Frontend
iOS Mobile
Client
Desktop
Client
Desktop
Client
BFF
Mobile
Client
BFF
37. Maybe almost Micro-frontends
âIn this approach, the web application is broken down into its features, and
each feature is owned, frontend to backend, by a different team. This ensures
that every feature is developed, tested and deployed independently from other
features.
Multiple techniques exist to recombine the features â sometimes as pages,
sometimes as components â into a cohesive user experience.â
Thoughtworks tags this as Trial https://www.thoughtworks.com/radar/techniques/micro-frontends
38. Opportunities
â Glimmer can bundle multiple
WebComponents in the same file
â Serverless computing / FASS
â Full-stack development of
application parts
â ...
41. In regards to
styling
â Application Suites have a
consistent look & feel
â Micro-frontends can very easily
have noticeably different look
and feel
â Most developers hate CSS
â We decided to implement a
styleguide put together by
designers as a SASS library
42. Styleguide
implementation
We created an ember-cli addon and
custom blueprint to standardize the
creation of style files.
We want to bundle the built css
style file with the sass source code
because we expect users to pipe
what they use through a build
process.
We donât have a clear strategy at the moment
beyond horizontal reuse (theming, integration,
layout strictness, etc).
43. Style Guide
â Weâre applying BEMIT
â Inverted Triangle CSS architecture. BEM + ITCSS = BEMIT
â Small additions to BEM for usage and state information ( namespaces, responsive
prefixes )
â We expect that application developers will import placeholders when
they reference a specific sass file, not the classname
SASS Placeholder
%ccc-input
Class
.ccc-input@extends
Theme
Sass lists
Object
o-
Component
c-
Utility
u-
Theme
t-
Scope
t- ..
.
use
Additive & in sync with the industry
Brownfield success story
To achieve reusability in this context, a better understanding is required.
The more services are independent from one the more reuse and composition will be possible with those services.
vertical software assets are deliberately constructed as part of a product line.
Vertical reuse helps you create new products faster, offer product variations/flavors, and fetch a higher return on your software investments over super-generic horizontal assets.
If this was compared to definitions of vertical and horizontal reuse it could be described as a unplanned combination of both
If this was compared to definitions of vertical and horizontal reuse it could be described as a unplanned combination of both
Focus and intent is to find software assets that are reusable across most or all your applications. Finding assets that are universally reusable is not only difficult but also will make your design overly complex.
But HTML Imports have not gotten traction among the standards committees or other browsers. There are active discussions on a successor, but any new standard would be years away.
https://hacks.mozilla.org/2015/06/the-state-of-web-components/
Itâs similar to Preact/React but compiles an applicationâs HTML templates into compact bytecode instead of building a Virtual DOM.
CustomElements canât be self-closing
https://developers.google.com/web/fundamentals/getting-started/primers/customelements
https://html.spec.whatwg.org/multipage/syntax.html#void-elements