- Nuxeo has historically used different technologies for its UI such as ZPT, JSF, and AngularJS but is now exploring using Web Components with frameworks like Polymer and React.
- Polymer helps build custom elements and adds sugar to remove boilerplate from element registration, lifecycle callbacks, and observers. Nuxeo elements could provide reusable UI building blocks.
- The new Nuxeo Web UI would use the DOM as the framework and include Nuxeo elements for data and UI, layouts for convention-based dynamic loading, and testing with WCT and nuxeo-ftest.
Polymers are large molecules, created of many subunits, and together they can compose larger elements that are fundamental to biological structure and function.
This is exactly the idea behind Polymer. To create custom HTML elements, as encapsulated, reusable components that work across desktop and mobile. To achieve this, Polymer uses the latest web technologies, such as Web Components, Shadow DOM, HTML templates and imports.
The Truth About Your Web App's PerformanceJohn Riviello
The performance of your web app is obviously important. But how do you know your web app is performing well for all of your users? Out of the box tools provide us metrics, but most only provide an overall view. This case study of building the XFINITY X1 single-page web app will demonstrate what frontend performance data you should be gathering, how to gather it, and how to make sense of all that data.
Existing tools provide insight into the performance of our web applications, but there is not a single tool that gives you the full picture. You can fill these gaps by gathering the performance data of your actual users. In this talk, we'll walk through the parts of the W3C Navigation Timing, High Resolution Time & User Timing recommendations that you can easily take advantage of right now to collect important metrics (with the help of Open Source software). We'll determine the "types" of users you need to focus on to understand your web app, as well as what other factors could impact those individual users' experiences. And we'll make sure "Average Response Time" is never the primary focus of your metrics dashboard
Google Developer Group(GDG) DevFest Event 2012 Android talkImam Raza
This presentation is Imam Raza's tech talk on "Android" in Google Developer Group DevFest 2012 Event. In the event Mr. Imam Raza condemned recent blasphemy act of Google of not removing blasphemy video by saying "Shame on You". He also appreciated the efforts of minorities who stand with Muslim community on this issue.
He also read following Stanza from Allama Iqbal poem "Jawaab-e-Shikwa", in which Allah is answering to complains of Muslims to Him. In below stanza Allah is praising His prophet Mohammad (peace be upon him) and telling that this universe is made due His beloved prophet Mohammad (peace be upon him). In last part of stanza Allah tells Muslims that if they want to success in this world and there after then they have to make themselves loyal to Mohammad (peace be upon him).
ہو نہ یہ پھول تو بلبل کا ترنم بھی نہ ہو
چمن دہر میں کلیوں کا تبسم بھی نہ ہو
یہ نہ ساقی ہو تو پھر مے بھی نہ ہو،خم بھی نہ ہو
بزم توحید بھی دنیا میں نہ ہو، تم بھی نہ ہو
خیمہ افلاک کا استادة اسی نام سے ہے
نبض ہستی تپش امادة اسی نام سے ہے
دشت میں، دامن کہسارمیں،میدان میں ہے
بحر میں، موج کی ا غوش میں،طوفان میں ہے
چین کے شہر، مراقش کے بیابان میں ہے
اور پوشیدة مسلمان کے ایمان میں ہے
چشم اقوام یہ نظارة ابد تک دیکھے
رفعت شان رفعنالک ذکرک دیکھے
کی محمد سے وفا تو نے تو ہم تیرے ہیں
یہ جہاں چیز ہے کیا، لوح و قلم تیرے ہیں
Web Components & Polymer 1.0 (Webinale Berlin)Hendrik Ebbers
This document discusses web components and Polymer 1.0. It begins with an introduction to web components and the different specifications that make them possible, including custom elements, HTML imports, shadow DOM, and templates. It then demonstrates how web components can be used to build reusable custom elements and templates for activities. Styles are kept encapsulated using shadow DOM. The document concludes by noting browser support for web components.
This document introduces Polymer, an open-source JavaScript library for building web components. It discusses how Polymer uses existing web platform APIs like templates, shadow DOM, and custom elements to create reusable components. It also explains that Polymer is not a framework, but a library that can be used to build elements on top of existing standards. Finally, it provides a simple example of creating a new custom element in Polymer and emphasizes that Polymer is production-ready.
Web Components are like Lego bricks. Easy to assemble and every piece simply fits together. But there is even more to it. Being able to create your own HTML-Tags with encapsulated style & logic changes the way you think about structuring your web applications. Get a sneak peek on how to develop scalable & maintainable applications in the future.
Introduction to Google Polymer 1.0 at JS Meetup in Athens, Greece. How Polymer builds a comprehensive front-end framework on the "Web Components" standard.
The document discusses emerging web technologies including web components, web graphics, service workers, WebRTC, web animations, and transpilers. It compares these technologies to native platforms, and how browsers work differently than CPUs and GPUs. The document contains links to additional resources on these topics.
Build Reusable Web Components using HTML5 Web cComponentsGil Fink
This document discusses using HTML5 Web Components to build reusable web components. It introduces several emerging Web Component standards including templates, imports, shadow DOM, and custom elements. Templates allow defining reusable DOM fragments, imports enable bundling HTML, CSS and JavaScript into a single component, shadow DOM provides DOM encapsulation, and custom elements define new semantic elements. While still in draft, Web Components aim to improve code reuse, encapsulation, separation of concerns and composition on the web. The presentation provides examples and demonstrations of each standard.
HTML5 의 표준 권고안이 채택되면서 HTML5는 엄청난 속도로 웹 전반에 걸쳐 보급되고 있습니다. HTML5 와 기존의 HTML4 / XHTML 1.1 과의 가장 큰 차잇점은 웹을 바라보는 관점입니다. 웹브라우저를 저작 플랫폼이 아닌 실행 환경으로 바라보는 HTML5의 독특한 관점은 webcomponent 에 잘 드러나 있습니다. 이 발표에서는 webcomponent 의 개념 및 역사를 훑고, webcomponent 오픈소스 구현체들인 webcomponents.js 및 구글의 Polymer, 모질라의 x-tag 과 함께 페이스북의 React 와의 비교 및 브라우저 대응에 대한 내용을 다룹니다.
BP101: A Modernized Workflow w/ Domino/XPagesedm00se
Extending on some of the themes of front-end heavy application development, this session covered the higher order themes of development workflow automation, revolving around the concepts of modern web app development from a full stack perspective.
Web Components + Backbone: a Game-Changing CombinationAndrew Rota
Web Components promise to change how we think about modularity on the web, and when combined with the structure and organization of Backbone.js we can create portable, dynamic, encapsulated UI modules that fit into any web application.
The Complementarity of React and Web ComponentsAndrew Rota
On Github: http://andrewrota.github.io/complementarity-of-react-and-web-components-presentation/index.html
The component driven, performance focused approach of React is a perfect complement to the modularity and portability of native HTML Web Components. At first glance, React and Web Components might seem like two radically different solutions to the same problem. But when combined properly they complement each other to create an extremely powerful, expressive framework for developing complex web applications.
This document contains slides from a presentation on Polymer and modern web APIs. The slides discuss how Polymer uses web components to build reusable custom elements, and how this allows for component-based development. They provide examples of popular elements like <paper-tabs> and <core-toolbar> that are used as building blocks. The slides also showcase several production uses of Polymer at Google scale, including the Google Santa Tracker application. They emphasize how Polymer leverages modern web platform APIs to build fast, modular, and powerful applications.
In this session we’ll talk about the evolving ASP.NET platform and what’s new with .NET 5, as well as what’s coming with .NET 6. Modern ASP.NET applications will take advantage of .NET full-stack using Microsoft’s Blazor framework. We’ll discuss how the new framework coupled with Telerik UI for Blazor cut development time and boost productivity.
[Nuxeo World 2013] Roadmap 2014 - Technical Part Nuxeo
The document outlines Nuxeo's technical roadmap from version 5.6 to 6.0, including plans to improve the API and automation infrastructure, enhance configuration and development tools like Nuxeo Studio and the IDE, support building web and mobile applications on the platform, improve interoperability, and optimize deployments for large clusters and the cloud.
Philip Shurpik "Architecting React Native app"Fwdays
React Native становится все более зрелым фреймворком для создания кросс платформенных мобильных приложений. Доклад основан на нашем опыте создания production приложения - от архитектуры до тестирования и CI.
Рассмотрим вопрос переиспользования кода при разработке для разных платформ- что и сколько процентов можно переиспользовать и как этого достичь.
Поговорим о том, как можно очень просто сделать offline-first приложение для чтения и создания данных. И чем нам в этом могут помочь Redux и Redux persist.
Разберем, как максимально просто сделать навигацию в приложении.
И, конечно же, какое production приложение без тестирования и continuous integration? Рассмотрим компонентное тестирование с Enzyme и интеграционное с Appium. А также, как максимально приблизить процесс deploy к тому, чему мы привыкли в web, с помощью CodePush.
This document provides an overview of Node.js including:
- What Node.js is and its event-driven, non-blocking architecture
- How to install Node.js and build applications
- How to use modules like Express.js and Socket.io
- Examples of deploying Node.js applications to Microsoft Azure
- A demonstration of building a collaborative drum machine app with Node.js, WebSockets, and the Web Audio API
The document outlines Nuxeo's roadmap from version 5.1 (Memphis) to version 5.2 (Chicago). It describes enhancements and new features planned for Chicago, including improvements to infrastructure, packaging, indexing/search, user interface, and additional semantic and social features. It provides status updates on the progress of these planned features.
This document provides an overview and agenda for an ASP.NET MVC practice and guidelines session. The agenda includes discussing MVC programming fundamentals like models, views, controllers and routes. It also covers NuGet, Entity Framework Code First, common UI libraries, the repository pattern, application layer architecture and dependency injection principles. The session includes demonstrations of these various ASP.NET MVC and software design topics.
Data Visualization & Content Analytics: Nuxeo Platform LTS 2015Nuxeo
This document discusses Nuxeo Data Visualization. It provides structured and consistent data from a content repository that is available for users whenever needed. It features visual dashboards that provide insights into data to help with decision making. Specific elements discussed include repository, search, and workflow data visualizations that are securely scalable and have powerful search and filtering capabilities. Nuxeo Elements are also discussed as a way to build custom elements and applications using standards like Web Components and Polymer.
This document summarizes Nuxeo's Release 8.1 including new tools for launching performance tests on Nuxeo clusters, an instant share feature for temporarily granting access without account creation, Live Connect integration for Box file sharing, and expanded Elasticsearch integration. It also discusses Nuxeo Docker images, a Nuxeo code generator, a Polymer sample app, updated REST and automation clients, and upcoming branch management features.
The document provides release notes for ASP.NET Core 2.0 and discusses features for building single page applications (SPAs) with .NET Core. Key points include:
- New SPA templates for React, Angular, and other frameworks that set up projects with bundling and other build tools.
- JavaScriptServices allow running Node.js code from .NET and facilitate building SPAs with .NET backends.
- SpaServices provide features like server-side prerendering, routing helpers, and Webpack middleware to improve the SPA development experience.
- While SPA templates provide a starting point, separate client and server projects with specialized tooling may provide a better development workflow
Vue.js is a JavaScript framework for building user interfaces that has gained popularity recently. It is smaller in size than Angular and React but provides similar functionality like virtual DOM and one-way data binding. Vue.js applications can range from simple single-page apps to complex projects with nested components. Key aspects of Vue.js include reusable components, templates with directives like v-if and v-for, lifecycle hooks, and the use of Vuex for state management and Vue Router for routing. The ecosystem around Vue.js continues to grow with tools, libraries, and support from companies using it in production.
Introduction to web application development with Vue (for absolute beginners)...Lucas Jellema
In this slide deck I show you how you can easily and quickly create quite rich web applications with Vue 3 – without having to study complex concepts or understand many technical details. I have only recently learned how to work with Vue 3 myself and now is the best time for me to share my learning experience (and my enthusiasm) with you. I know what I found essential to understand and what most got me excited in these early steps (what was a little bit hard to grasp). I believe that I can present my steps and guide you to experience the same fun and have a similarly gratifying experience. I am not an expert in this subject – I have barely learned how to walk and that is why I can help you with these first steps with Vue.
In this deck, I do not explain how Vue works. I do not really know that. I will show you how to work with it and how to create web applications that are functional, appealing, fast and responsive.
The approach I am taking is straightforward:
• I will tell you a little bit about web development, browsers and reactive frameworks
• I will show the hello world of Vue applications
• I will explain about components and nesting, events, data binding and reactive behavior and demonstrate these concepts
• I will introduce Vue UI Component libraries – and with no effort at all we will launch our application to the next level – with rich components to explore, manipulate, visualize data collections
• We will publish the web application from our development environment to where the whole world could see it – using GitHub Pages
• As bonus topic – we discuss state management
At the end of this session you will be able to quickly create a simple yet rich web application with Vue 3. You have a starting point to further evolve your skills with the many online resources I am convinced that you will enjoy your newfound powers and the simplicity and power of Vue 3.
Note: a tutorial accompanies this slide deck - see https://github.com/lucasjellema/code-face-vue3-intro-reactiive-webapps-aug2023/blob/main/README.md
NodeJS is an evented I/O framework that allows JavaScript to be used for server-side web development. It uses the V8 JavaScript engine from Google Chrome. NoSQL databases like MongoDB, Redis, Cassandra, and Neo4J can integrate well with NodeJS through packages like Mongoose, Riak.js, node-redis, and node-neo4j. This allows real-time applications to be built combining the speed and scalability of NodeJS with flexible data storage of NoSQL databases.
This document discusses NodeJS and NoSQL databases. NodeJS is an evented I/O framework built on Google's V8 JavaScript engine that allows for server-side JavaScript. It introduces some common NodeJS packages like ExpressJS, Jade, Nodemon, and Node-inspector. It then discusses several NoSQL database types (document, key-value, columnar, and graph) and shows how NodeJS interfaces with popular NoSQL databases like CouchDB, MongoDB, Riak, Redis, Cassandra, and Neo4J through packages like Cradle, Mongoose, Riak.js, node_redis, and node-neo4j. The document benefits of NodeJS like speed and large
Vue to nowy zawodnik wagi ciężkiej w świecie JS. Jak robić za jego pomocą skalowalne aplikacje frontendowe? Jakie problemy rozwiązuje Nuxt i dlaczego warto go użyć w następnym projekcie Vue? Co może pójść nie tak w live codingu podczas prezentacji? Wszystko to i więcej w jednej prezentacji!
This document discusses the Polymer library and framework for building progressive web applications using web components. It provides an overview of key Polymer concepts like templates, shadow DOM, custom elements, and data binding. It also describes how Polymer can improve developer productivity and enable reusability. Examples are given of popular Polymer elements and tools. Performance best practices like lazy loading and the PRPL pattern are covered.
Angular elements - embed your angular components EVERYWHERENadav Mary
My lecture about angular elements, a new feature released in angular version 6 which allows us to transform angular components into custom elements and use them outside angular's scope.
The document discusses using Node.js microservices with Magento. Specifically, it discusses:
- Using Node.js to create microservices for Magento like NodeJento for the ORM and services for Laravel, Python, etc.
- Some benefits of using Node.js microservices include non-blocking I/O, single threading, and reusing the same tech stack on front-end and back-end.
- It provides an example of initializing a Node.js/Express app with NodeJento to query Magento database models and return product data.
Overview of Nuxeo EP (Nuxeo Enterprise Platform). ECM platform for content applications. Slide deck reviews the technology stack, common use cases, high level roadmap for 2010.
More information at www.nuxeo.com
Have you ever built a sandcastle at the beach, only to see it crumble when the tide comes in? In the digital world, our information is like that sandcastle, constantly under threat from waves of cyberattacks. A cybersecurity course is like learning to build a fortress for your information!
This course will teach you how to protect yourself from sneaky online characters who might try to steal your passwords, photos, or even mess with your computer. You'll learn about things like:
* **Spotting online traps:** Phishing emails that look real but could steal your info, and websites that might be hiding malware (like tiny digital monsters).
* **Building strong defenses:** Creating powerful passwords and keeping your software up-to-date, like putting a big, strong lock on your digital door.
* **Fighting back (safely):** Learning how to identify and avoid threats, and what to do if something does go wrong.
By the end of this course, you'll be a cybersecurity champion, ready to defend your digital world and keep your information safe and sound!
Jarren Duran Fuck EM T shirts Jarren Duran Fuck EM T shirtsexgf28
Jarren Duran Fuck EM T shirts
https://www.pinterest.com/youngtshirt/jarren-duran-fuck-em-t-shirts/
Happy to Pay Fine for Expletive shirt,Happy to Pay Fine for Expletive T shirts,Jarren Duran Fuck EM T shirts Grabs yours today. tag and share who loves it.
The advent of social media has revolutionized communication, transforming the way people connect, share, and interact globally. At the forefront of this digital revolution are visionary entrepreneurs who recognized the potential of the internet to foster social connections and create communities. This essay explores the founders of some of the most influential social media platforms, their journeys, and the lasting impact they have made on society.
Mark Zuckerberg, along with his college roommates Eduardo Saverin, Andrew McCollum, Dustin Moskovitz, and Chris Hughes, founded Facebook in 2004. Initially created as a social networking site for Harvard University students, Facebook rapidly expanded to other universities and eventually to the general public. Zuckerberg's vision was to create an online directory that connected people through their real-life social networks.
Twitter, founded in 2006 by Jack Dorsey, Biz Stone, and Evan Williams, brought a new dimension to social media with its microblogging platform. Dorsey envisioned a service that allowed users to share short, real-time updates, limited to 140 characters (now 280). This concise format encouraged rapid sharing of information and fostered a culture of brevity and immediacy.
Kevin Systrom and Mike Krieger co-founded Instagram in 2010, focusing on photo and video sharing. Systrom, who studied photography, wanted to create an app that made mobile photos look professional. The app's unique filters and easy-to-use interface quickly gained popularity, amassing over a million users within two months of its launch.
Instagram's emphasis on visual content has had a significant cultural impact. It has popularized the concept of influencers, giving rise to a new industry where individuals can monetize their popularity and reach. The platform has also revolutionized digital marketing, enabling brands to connect with consumers in more authentic and engaging ways. Acquired by Facebook in 2012, Instagram continues to be a dominant force in social media, shaping trends and cultural norms.
Reid Hoffman founded LinkedIn in 2002 with the goal of creating a professional networking platform. Unlike other social media sites focused on personal connections, LinkedIn was designed to connect professionals, facilitate job searches, and foster business relationships. The platform allows users to create professional profiles, network with colleagues, and share industry insights.
LinkedIn has become an indispensable tool for job seekers, recruiters, and businesses. It has transformed the job market by making it easier to find and connect with potential employers and employees. LinkedIn's influence extends beyond job searches; it has become a hub for professional development, thought leadership, and industry news. Hoffman's vision has significantly impacted how professionals manage their careers and build their networks.
Jan Koum and Brian Acton co-founded WhatsApp in 2009, aiming to create a simple, reliable..
10th International Conference on Networks, Mobile Communications and Telema...ijp2p
10th International Conference on Networks, Mobile Communications and
Telematics (NMOCT 2024)
Scope
10th International Conference on Networks, Mobile Communications and Telematics (NMOCT 2024) is a forum for presenting new advances and research results in the fields of Network, Mobile communications, and Telematics. The aim of the conference is to provide a platform to the researchers and practitioners from both academia as well as industry to meet and share cutting-edge development in the field.
Authors are solicited to contribute to the conference by submitting articles that illustrate research results, projects, surveying works, and industrial experiences that describe significant advances in the following areas but are not limited to.
Topics of interest include, but are not limited to, the following:
Mobile Communications and Telematics Mobile Network Management and Service Infrastructure Mobile Computing Integrated Mobile Marketing Communications Efficacy of Mobile Communications Mobile Communication Applications Critical Success Factors for Mobile Communication Diffusion Metric Mobile Business Enterprise Mobile Communication Security Issues and Requirements Mobile and Handheld Devices in the Education Telematics Tele-Learning Privacy and Security in Mobile Computing and Wireless Systems Cross-Cultural Mobile Communication Issues Integration and Interworking of Wired and Wireless Networks Location Management for Mobile Communications Distributed Systems Aspects of Mobile Computing Next Generation Internet Next Generation Web Architectures Network Operations and Management Adhoc and Sensor Networks Internet and Web Applications Ubiquitous Networks Wireless Multimedia Systems Wireless Communications
Heterogeneous Wireless Networks Operating System and Middleware Support for Mobile Computing Interaction and Integration in Mobile Communications Business Models for Mobile Communications E-Commerce & E-Governance
Nomadic and Portable Communication Wireless Information Assurance Mobile Multimedia Architecture and Network Management Mobile Multimedia Network Traffic Engineering & Optimization Mobile Multimedia Infrastructure Developments Mobile Multimedia Markets & Business Models Personalization, Privacy and Security in Mobile Multimedia Mobile Computing Software Architectures Network & Communications Network Protocols & Wireless Networks Network Architectures High Speed Networks Routing, Switching and Addressing Techniques Measurement and Performance Analysis Peer To Peer and Overlay Networks QOS and Resource Management Network-Based Applications Network Security Self-organizing networks and Networked Systems Mobile & Broadband Wireless Internet Recent Trends & Developments in Computer Networks
Paper Submission
Authors are invited to submit papers through the conference Submission System by July 06, 2024. Submissions must be original and
2. Us, Ourselves and Nuxeo
https://github.com/dmetzler & https://github.com/akervern
Nuxeo | Paris / SF / NYC / Lisbon
60 people ⊃35 devs
Platform Dev + Support
https://github.com/nuxeo
11. React VS Polymer VS ….
- Set of standards: Web Components
(Custom Elements, HTML Templates &
imports, Shadow DOM).
- Polymer should just be an implementation:
our elements could be used with any
framework.
- No commitment to a framework
13. Web Components
Web Components consists of several separate
technologies. You can think of Web Components as
reusable user interface widgets that are created using
open Web technology. They are part of the browser, and
so they do not need external libraries like jQuery or Dojo.
Source: MDN
20. Helps building new custom elements
Adds elegance / Removes boilerplate
➔Element registration
➔Life cycle callbacks
➔Observers
Polymer Framework
Sugar, not magic!
21. <dom-module id="my-element">
<link rel="import" href="element-behavior.html">
<template>
<style><!-- local CSS --></style>
<!-- local DOM -->
</template>
<script>
Polymer({
is: "my-element",
// add properties and methods on the element's prototype
properties: {
// declare properties for the element's public API
...
},
observers: [],
created: () => {...}
...
});
</script>
</dom-module>
Polymer Element
ShadowDOM
Template
24. Polymer
New discovery but where do we start ?
Testing, starting but not breaking UI contributions!
Let’s override the only screen not configurable!
36. ➔DOM as the framework (+ Polymer)
➔Nuxeo Elements
◆ Data elements
➔Nuxeo UI Elements
◆ UI building blocks
➔Layouts ⇔ Custom elements
◆ Convention based dynamic loading
Web UI
48. ➔No Bower, just npm
➔ES6
➔Everything is an element
➔Build and package for deployment
Nuxeo View Designer
49. Scaffolding
➔ Full customization
◆ We can not plan for everything
◆ People already override templates
◆ Not built with that use case in mind
◆ Not that simple
➔ Runtime metamodel comes at a cost
◆ Need a simpler/shallower component tree
➔ BYOUI + Studio
Hello,
This presentation is going to sum up the platform in term of UI and we are going to see how we build currently our next future interface with Polymer and web components in general.
Nuxeo is a java platform open source editor, so all the developers are closely working with the support in order to help our customers and get direct feedback to fix bugs quickly and to reactively improve our features.
First, let’s discuss our UI history… Because we are facing constraints and requirements for building an UI over time...
Late in 2000, Nuxeo was found and was providing a platform in Python, in Zope. At this time, the HTML templating was in ZPT (Zope page templating but I won’t go into that :)) Then we had a big migration to Java, because our customers have dev teams with specific skills and we had to follow the trend. The entire code was rewritten and JSF 1.0 was chosen be part of the UI. We used freemarker as well as an alternative. JSF2.0 in 2012, little late but it was done knowing we had to change for something new and attracting for people, we returned to the client side! We had some customization in AngularJS, ReactJS, Polymer but not still for the main UI.
Current JSF2 view demo
First question, is what do we need to adress our customer needs? Which framework we can choose. Single page app is a good direction; build on top of the JS client.
AngularJS example
Im not going to compare all the frameworks. There is enough debates about this online, this is not the purpose of this conference and you will be certainly stronger than me on this part. No, by this part, i would like to tell you what we are concerned about at Nuxeo about.
First the ideal situation would be to have no commitment to the framework. We are committed to Polymer, we’re getting married to Polymer. But the most important thing for us is
To have a set of standards: the web components. To not re-invent the wheel, to get the standards. If there is a problem with polymer one day, we can register our elements, we will loose databinding and other things but we could make it in case
Polymer should just be an implementation and yes our customers will still have different skills in their dev team so we have to be general in our approach and the webcomponents are perfect for that
We have chosen polymer because we think it’s the simplest, most elegant and yes, the dataflow of reactjs is nice and lots of things are good but i can tell you i have seen presales, with no strong javascript background and they were really happy to use that. For the dataflow we could implement Flux in our side…
To finish with this short interlude, i wanted to show you this tweet of last week, by a google polymer engineer that was funny for me, but not apparently for everybody :) I don’t endorse of course with a smiley, especially the adjective siloed… but what we have to remember here is just: frameworks are paving the path for getting standards. So really all the frameworks are good and thank you guys for all this work.
Before entering into the subject of UI, I have to tell you about mechanisms, concepts of the platform… Because we are facing constraints and requirements for building our new interface.
-> Web Components Standard; not yet finish
Custom Elements; Create own tag / elements; and follow them suit. (emboiter)
Think of a template as a content fragment that is being stored for subsequent use in the document. While the parser does process the contents of the <template> element while loading the page, it does so only to ensure that those contents are valid; the element's contents are not rendered, however.
Shadow DOM provides encapsulation for the JavaScript, CSS, and templating in a Web Component. Shadow DOM makes it so these things remain separate from the DOM of the main document. You can also use Shadow DOM by itself, outside of a web component.
Why would you want to keep some code separate from the rest of the page? One reason is that on a large site, for example, if the CSS is not carefully organized, the styling for the navigation can "leak" into the main content area where it was not intended to go, or vice-versa. As a site or an app scales, this kind of thing becomes difficult to avoid.
HTML Imports is intended to be the packaging mechanism for Web Components, but you can also use HTML Imports by itself.
Before entering into the subject of UI, I have to tell you about mechanisms, concepts of the platform… Because we are facing constraints and requirements for building our new interface.
Customelements.io and builtwithpolymer.org
+ Behaviors
+ Utility Helper
Why did we want to change for a new UI? Let’s see what has been our first approach.
That was the old screen in JSF
Now the new one
Currently our UI framework depends on a metamodel and on Facelets + JSF + Seam
We want to make your job easier and provide a set of portable building blocks, little black boxes, that you can bundle in your applications (web and hybrid mobile and desktop apps)
In our current state we have a customizable a and pluggable UI but now we and something reusable and composable.
So, instead of "hammering" our UI to fit your needs you will be able to easily build your own.
Still in its infancy (as shown by the logo on the top right)
Main goals:
Iterative user-centered design (move fast, experiment, test, learn, adjust) rinse, repeat
See how far we can get with DOM as the framework. KISS
Evolve our Nuxeo Elements
Nuxeo UI Elements as building blocks (BYOUI)
Layous as custom elements
Tooling and QA
Work on Web UI was started quickly so we can do iterative user centered design. We decided to use Polymer as the framework and right now we have more questions than answers so we're tackling several challenges, like:..
web-component-tester:
wct-local: WCT plugin that enables support for local browsers via Selenium
In order to maintain those elements, we had to focus a long time on the QA part.
We come from a java ecosystem with maven, jenkins and we have discovered the JS dependencies management world with NPM 2 dependency tree issues and the version conflict with bower etc...
So we have this little story.
see here what bower-fetch is (just an Ant macro to fetch artifact from maven).
This is the script I’ve been using to package them https://gist.github.com/nelsonsilva/2c961fab4d7a326db8d6
https://github.com/eirslett/frontend-maven-plugin downloads/installs Node and NPM locally for your project, runs NPM install, and then any combination of Bower,Grunt, Gulp, Jspm, Karma, or Webpack.
As you all know Polymer released their Polymer Designer it was pretty cool, so cool that of course we couldn’t help but to build our own for the elements we were working on ;) An thus we had a first prototype of Nuxeo designer
Justin Fagnani started work on a new version of Polymer Designer for Polymer 1.0. We were hanging on the edge of our seats waiting for a first release
We asked around but apparently this has been pushed to the bottom of the backlog, where tickets go to die :P
So, we brought in a team of ninjas to build our own visual designer….
Also, since we never intended to have a full blown visual HTML editor we decided it would be good to have a go at it and build our own WYSIWYG editor for our layouts so we are now hard at work on Nuxeo View Designer
Facelet templates are heavily factorized and built around our metamodel => cleaner and easier to maintain but maybe not that easy to understand for new comers
More and more customers are building complex and specific business application
They want to build their own web application and still use Studio to configure it