Pivotal Dojo 서비스는 조직이 클라우드로 전환하기 위해 플랫폼 팀을 균형있게 구성하고 애자일하게 운영할 수 있는 방법을 체득할 수 있게 도와줍니다. 이번 세션에서는 이 Dojo서비스와 실제 사례에 대해 소개하며 기업이 지속가능한 혁신이 가능케 하는 방법에 대해 알아봅니다.
굿 소프트웨어 컴퍼니로의 여정(Journey To Be a Good Software Company)VMware Tanzu Korea
본 발표자료는 Pivotal Korea에서 주최한 Cloud Native Day 2019 Seoul 컨퍼런스의 기조연설 발표자료입니다.
발표자: 사친 쉬리다르(Sachin Shridhar), 서비스 및 CSO 부사장, Pivotal America & APJ
발표자 소개: 사친 쉬리다르는 피보탈 아시아태평양&일본(APJ) 및 미국 지역의 커스터머 석세스 조직(CSO) 그룹의 부사장입니다. CSO는 솔루션 아키텍처, 구현, 딜리버리, 컨설팅 및 교육을 포함한 모든 리전의 테크니컬 서비스를 책임지고 있는 그룹입니다. 사친은 고객의 소프트웨어 기반 환경으로의 전환을 돕기 위해, 피보탈 오퍼링을 운영하여 소프트웨어 개발을 기업의 핵심 역량 및 이점으로 만드는 일을 하고 있습니다. 사친은 업계에서 20년 이상, 아시아 태평양 및 일본 전역의 시장에서 10년 이상을 보냈습니다. 그는 테크놀로지 기업의 서비스 및 솔루션에 오래된 경력을 가지고 있으며, 고객과 파트너가 기술 제공을 통해 성공할 수 있도록 지원해 왔습니다. 피보탈 이전에는 5년 넘게 레드햇의 아시아태평양&일본 서비스 담당 부사장으로 근무하면서 프리세일즈, 컨설팅 및 교육 비즈니스를 주도했습니다.
목차:
Why MicroServices
Who has done it
Why Pivotal
본 세션에서는 Pivotal이 추구하는 Any App, Every Cloud, One Platform 전략에 대하여 살펴보고, 이러한 전략이 마이크로 서비스와 같은 클라우드 네이티브 IT 환경을 구성하는데 어떻게 도움을 줄 수 있는지 살펴 봅니다. 특히 Kubernetes, Istio, Envoy 등의 다양한 오픈소스를 어떻게 활용하고 플랫폼에 흡수하여 운영할 수 있는지 살펴 봅니다.
6.6 years of Extensive Experience in Developing, creating Application using Microservices architecture using
SpringBoot ,Spring cloud ,Java11 , Angular
Pivotal Dojo 서비스는 조직이 클라우드로 전환하기 위해 플랫폼 팀을 균형있게 구성하고 애자일하게 운영할 수 있는 방법을 체득할 수 있게 도와줍니다. 이번 세션에서는 이 Dojo서비스와 실제 사례에 대해 소개하며 기업이 지속가능한 혁신이 가능케 하는 방법에 대해 알아봅니다.
굿 소프트웨어 컴퍼니로의 여정(Journey To Be a Good Software Company)VMware Tanzu Korea
본 발표자료는 Pivotal Korea에서 주최한 Cloud Native Day 2019 Seoul 컨퍼런스의 기조연설 발표자료입니다.
발표자: 사친 쉬리다르(Sachin Shridhar), 서비스 및 CSO 부사장, Pivotal America & APJ
발표자 소개: 사친 쉬리다르는 피보탈 아시아태평양&일본(APJ) 및 미국 지역의 커스터머 석세스 조직(CSO) 그룹의 부사장입니다. CSO는 솔루션 아키텍처, 구현, 딜리버리, 컨설팅 및 교육을 포함한 모든 리전의 테크니컬 서비스를 책임지고 있는 그룹입니다. 사친은 고객의 소프트웨어 기반 환경으로의 전환을 돕기 위해, 피보탈 오퍼링을 운영하여 소프트웨어 개발을 기업의 핵심 역량 및 이점으로 만드는 일을 하고 있습니다. 사친은 업계에서 20년 이상, 아시아 태평양 및 일본 전역의 시장에서 10년 이상을 보냈습니다. 그는 테크놀로지 기업의 서비스 및 솔루션에 오래된 경력을 가지고 있으며, 고객과 파트너가 기술 제공을 통해 성공할 수 있도록 지원해 왔습니다. 피보탈 이전에는 5년 넘게 레드햇의 아시아태평양&일본 서비스 담당 부사장으로 근무하면서 프리세일즈, 컨설팅 및 교육 비즈니스를 주도했습니다.
목차:
Why MicroServices
Who has done it
Why Pivotal
본 세션에서는 Pivotal이 추구하는 Any App, Every Cloud, One Platform 전략에 대하여 살펴보고, 이러한 전략이 마이크로 서비스와 같은 클라우드 네이티브 IT 환경을 구성하는데 어떻게 도움을 줄 수 있는지 살펴 봅니다. 특히 Kubernetes, Istio, Envoy 등의 다양한 오픈소스를 어떻게 활용하고 플랫폼에 흡수하여 운영할 수 있는지 살펴 봅니다.
6.6 years of Extensive Experience in Developing, creating Application using Microservices architecture using
SpringBoot ,Spring cloud ,Java11 , Angular
Project Riff는 Kubernetes 기반의 함수형 서비스로 스크립트, Node.js, Spring Cloud Function로 작성된 함수를 이벤트 발생시 실행 할 수 있습니다. Riff 상에 Spring Cloud Function을 사용하여 Serverless Spring을 사용하는 방법에 대해서 살펴봅니다.
PKS is Not JAK8sP (Just Another Kubernetes Platform)VMware Tanzu
SpringOne Platform 2019
Title: PKS is Not JAK8sP (Just Another Kubernetes Platform)
Speaker: Cornelia Davis VP, Technology, Pivotal
Youtube: https://youtu.be/THlqs287lpI
How to Overcome Data Challenges When Refactoring Monoliths to MicroservicesVMware Tanzu
When taking existing monoliths and decomposing their components into new microservices, the most critical concerns have much less to do with the application code and more to do with handling data.
In this webinar, Kenny Bastani from Pivotal and Jason Mimick from MongoDB will focus on various methods of strangling a monolith’s ownership of domain data by transitioning the system of record over time. The new system of record, MongoDB, will fuel rapidly built and deployed microservices which companies can leverage for new revenue streams.
They will use practices from Martin Fowler’s Strangler Application to slowly strangle domain data away from a legacy system into cloud-native MongoDB clusters using microservices built with Spring Boot and Spring Cloud.
Speakers:
Kenny Bastani is a Spring developer advocate at Pivotal. As a passionate blogger and open source contributor, Kenny engages a community of passionate developers on topics ranging from graph databases to microservices. Kenny is a co-author of Cloud Native Java: Designing Resilient Systems with Spring Boot, Spring Cloud, and Cloud Foundry from O’Reilly.
Jason Mimick is the Technical Director for Partners at MongoDB developing new product and technical innovations with a number of companies. He's been at MongoDB nearly 4 years and previously spent the last 20-odd years in various engineering positions at Intersystems, Microsoft, and other companies.
Introduction to Microsoft Integration TechnologiesBizTalk360
This presentation is from the TechMeet360 event held on August 6, 2016 at BizTalk360 office premises in Coimbatore. In this slide, BizTalk360's Technical Lead Arunkumar Kumaresan gives Introduction to Microsoft Integration Technologies which is especially helpful for budding technologists who would like to make their career with Integration platform. This presentation covers basic introduction to Enterprise Application Integration (EAI), Service Bus, Logic Apps, Cloud Integration, Azure loT Event Hub, Microsoft Integration Scenarios, Biztalk Services and Jet Architecture (Event Driven / Microservices)
Project Riff는 Kubernetes 기반의 함수형 서비스로 스크립트, Node.js, Spring Cloud Function로 작성된 함수를 이벤트 발생시 실행 할 수 있습니다. Riff 상에 Spring Cloud Function을 사용하여 Serverless Spring을 사용하는 방법에 대해서 살펴봅니다.
PKS is Not JAK8sP (Just Another Kubernetes Platform)VMware Tanzu
SpringOne Platform 2019
Title: PKS is Not JAK8sP (Just Another Kubernetes Platform)
Speaker: Cornelia Davis VP, Technology, Pivotal
Youtube: https://youtu.be/THlqs287lpI
How to Overcome Data Challenges When Refactoring Monoliths to MicroservicesVMware Tanzu
When taking existing monoliths and decomposing their components into new microservices, the most critical concerns have much less to do with the application code and more to do with handling data.
In this webinar, Kenny Bastani from Pivotal and Jason Mimick from MongoDB will focus on various methods of strangling a monolith’s ownership of domain data by transitioning the system of record over time. The new system of record, MongoDB, will fuel rapidly built and deployed microservices which companies can leverage for new revenue streams.
They will use practices from Martin Fowler’s Strangler Application to slowly strangle domain data away from a legacy system into cloud-native MongoDB clusters using microservices built with Spring Boot and Spring Cloud.
Speakers:
Kenny Bastani is a Spring developer advocate at Pivotal. As a passionate blogger and open source contributor, Kenny engages a community of passionate developers on topics ranging from graph databases to microservices. Kenny is a co-author of Cloud Native Java: Designing Resilient Systems with Spring Boot, Spring Cloud, and Cloud Foundry from O’Reilly.
Jason Mimick is the Technical Director for Partners at MongoDB developing new product and technical innovations with a number of companies. He's been at MongoDB nearly 4 years and previously spent the last 20-odd years in various engineering positions at Intersystems, Microsoft, and other companies.
Introduction to Microsoft Integration TechnologiesBizTalk360
This presentation is from the TechMeet360 event held on August 6, 2016 at BizTalk360 office premises in Coimbatore. In this slide, BizTalk360's Technical Lead Arunkumar Kumaresan gives Introduction to Microsoft Integration Technologies which is especially helpful for budding technologists who would like to make their career with Integration platform. This presentation covers basic introduction to Enterprise Application Integration (EAI), Service Bus, Logic Apps, Cloud Integration, Azure loT Event Hub, Microsoft Integration Scenarios, Biztalk Services and Jet Architecture (Event Driven / Microservices)
Presenters: Brad Nunnally, WX Solution Architect, Perficient & Shyam Sunter, Technical Solution Architect, Perficient
Using a project implementation example, we review the various methods the team used to build out this abstracted UI layer. Understand the lessons learned from their journey and the recommended approaches for managing Dojo element, and enabling separation of the HTML, CSS and JavaScript from the WebSphere Portal code so they
can maintain, update and test front-end enhancements to a continuous deployment mode.
The Superhero’s Method of Modern HTML5 Development by RapidValue SolutionsRapidValue
There was a time, when we used to spend hours and hours, trying to fix the browser compatibility issues in our UI. If problems persisted, we ended up cursing the Internet Explorer at least once in a day. We were unable to learn anything new, because nothing “new” could give a better browser support. Today, a few years after the arrival of CSS3 & HTML5 things have changed for good. All the major browsers are stable and have started supporting all the essential properties of CSS3 & HTML5.
A new era has started and with each passing day, the front-end developers are getting more and more enlightened. Yes, the developers are portrayed as the 'superheroes'.
The whitepaper explains about various tools, plugins and automations in HTML5.
1. CSS Preprocessors
2. Emmet
3. Grunt
4. Bower
6. LiveReload
7. Yeoman generators
We are no longer completely dependent on the legacy browsers. We are taking initiatives to stretch further and develop everything that is possible with regards to the browser. By doing a lot of automation, you can avoid repeated mistakes, write in a clean and concise manner, and it becomes pretty easy to architect, maintain and extend the modular code. The life of an HTML5 developer is made pretty easy.
Mobile Web Applications using HTML5 [IndicThreads Mobile Application Develop...IndicThreads
Session Presented at 1st IndicThreads.com Conference On Mobile Application Development held on 19-20 November 2010 in Pune, India
WEB: http://M10.IndicThreads.com
------------
Speaker: Romin Irani
Abstract:
HTML5 is expected to become mainstream soon. It brings a lot of new features that developers can incorporate today. The Webkit browser is currently the best implementation of the HTML5 standards and it is also available on a variety of Mobile devices like iPhone, Android, etc.
Mobile Web applications are getting powerful day by day. They have distinct advantages over Native mobile applications. With Webkit available on most Smartphone browsers, you can create powerful mobile web applications today. Combine this with some of the latest HTML5 features, and it makes a compelling alternative available to developers today.
This session will give an overview of :
a) What mobile web applications are and their pros / cons vis-a-vis Native Mobile applications.
b) HTML5 features like geolocation, offline storage, web workers, etc
c) How one can use HTML5 features mentioned in (b) to develop mobile web applications today.
d) Demonstrate all the above features via code samples.
e) Cover challenges involved in making sure that the same code base runs on all mobile browsers in a majority of Smartphones.
Takeaway for the audience:
a) Knowledge about upcoming HTML5 standards specifically features like geolocation, offline storage, web workers, etc.
b) Understand of Mobile Web applications and how we can use HTML5 standards to deliver powerful web applications that are delivered on most smartphones today.
c) Challenges involved in making sure that the Mobile Web Applications works well in most browsers across different devices.
Angular (v2 and up) - Morning to understand - LinagoraLINAGORA
Slides of the talk about Angular, at the "Matinée Pour Comprendre" organized by Linagora the 22/03/17.
Discover what's new in Angular, why is it more than just a framework (platform) and how to manage your data with RxJs and Redux.
This presentation has been presented at the Flex User Group in Berlin [1] on July 5th, 2012. I basically tried to cover the current state of Apache Flex, its possible future role in 2050 and compared Apache Flex with other Web technologies. I also tried to summarise my current work at Apache Flex. Hopefully, you'll find this presentation inspiring, too ;)
[1] http://www.flash-kiez.de
OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web SimulatorGail Frederick
Learn how to build UI for and debug HTML5 apps for mobile devices using Rapid Interface Builder (RIB) and Web Simulator, two open-source tools recently released by Intel. This session dives deep into the feature sets of both Web app developer tools, with demos, and shows you how you can influence the future of these open-source projects.
Rapid Interface Builder, RIB, is a browser-based design tool for quickly prototyping and creating Web apps for mobile devices and desktops. RIB allows a developer to layout UI by dropping widgets onto a canvas and reviewing the UI in interactive preview mode. RIB generates HTML5 and JavaScript that can be imported into your IDE of choice to complete the app. RIB supports jQueryMobile and Tizen widgets and runs on Google Chrome and Chromium browsers.
Web Simulator is a lightweight open-source tool for debugging mobile web applications. Extending the Google Chrome developer tools, it enables running and debugging web APIs for mobile platforms on the developer’s desktop system. Web Simulator allows you to simulate accelerometer and other sensor data, incoming and outgoing calls, geolocation events and battery status and other mobile device events in your Web app with fine-grained control over events. It currently supports HTML5 and the Tizen Web APIs.
HTML5 in Plain English: What it means for SharePoint and Your OrganizationJonathan Littleton
HTML5 is the up and coming standard for web development. It can create rich user experiences with less effort, enhance search functionality, and ensure a more consistent experience across different platforms. But what does that have to do with SharePoint? This session will answer that questions and cover the new features that are only available in HTML5, SharePoint 2013 HTML5 mobile pages, new SharePoint branding options, and some limitations organizations face when it comes to HTML5. Demonstrations will include: a custom map SharePoint webpart, dynamic animations, a rich video experience without plugins, and more. No coding experience is needed for this presentation.
Single Page Applications – Know The Ecosystem systemSynerzip
This webinar discusses technology frameworks recommended approach for building Single Page web applications.
In this Webinar, we will explore what goes into building a Single Page Application and the ecosystem around it. We will be looking at different aspects of Single Page Applications and how they fit together.
Read more at https://www.synerzip.com/webinar/building-single-page-applications-know-the-ecosystem-webinar-february-2014/
Design Systems - Develop multiple features across multiple platforms
Isomorphic Systems - Javascript rendered on backend
Shared Codebases - Component library, multiple teams, multiple platforms
Seperation of Concerns - Services seperated out, easy to migrate
Unit Testing - Much much needed
State Management - Seperate out what application is doing from UI Logic. (Thanks to Facebook)
Immutability -Core Javascript Principle we use in day to day life.
Different ways to handle Asynchronous behavior - Async/await, observables, promises, etc.
Similar to [RakutenTechConf2013] [E-2] HTML5 in Rakuten (20)
In my presentation, I will summarize the applied and practical aspects of creating sustainable software products. What does it mean - "green" software for users and developers? I want to explain how creating “green” software can be driven by multiple organizational layers. And how building “green” software products can help the organization increase overall software product efficiency.
This presentation introduces the OWASP Top 10:2021.
It explains how to look at the data related to OWASP Top 10:2021, and provides detailed explanations of items with distinctive data. It also introduces the OWASP Project related to each item.
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofsAlex Pruden
This paper presents Reef, a system for generating publicly verifiable succinct non-interactive zero-knowledge proofs that a committed document matches or does not match a regular expression. We describe applications such as proving the strength of passwords, the provenance of email despite redactions, the validity of oblivious DNS queries, and the existence of mutations in DNA. Reef supports the Perl Compatible Regular Expression syntax, including wildcards, alternation, ranges, capture groups, Kleene star, negations, and lookarounds. Reef introduces a new type of automata, Skipping Alternating Finite Automata (SAFA), that skips irrelevant parts of a document when producing proofs without undermining soundness, and instantiates SAFA with a lookup argument. Our experimental evaluation confirms that Reef can generate proofs for documents with 32M characters; the proofs are small and cheap to verify (under a second).
Paper: https://eprint.iacr.org/2023/1886
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
UiPath Test Automation using UiPath Test Suite series, part 5DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 5. In this session, we will cover CI/CD with devops.
Topics covered:
CI/CD with in UiPath
End-to-end overview of CI/CD pipeline with Azure devops
Speaker:
Lyndsey Byblow, Test Suite Sales Engineer @ UiPath, Inc.
Pushing the limits of ePRTC: 100ns holdover for 100 daysAdtran
At WSTS 2024, Alon Stern explored the topic of parametric holdover and explained how recent research findings can be implemented in real-world PNT networks to achieve 100 nanoseconds of accuracy for up to 100 days.
Full-RAG: A modern architecture for hyper-personalizationZilliz
Mike Del Balso, CEO & Co-Founder at Tecton, presents "Full RAG," a novel approach to AI recommendation systems, aiming to push beyond the limitations of traditional models through a deep integration of contextual insights and real-time data, leveraging the Retrieval-Augmented Generation architecture. This talk will outline Full RAG's potential to significantly enhance personalization, address engineering challenges such as data management and model training, and introduce data enrichment with reranking as a key solution. Attendees will gain crucial insights into the importance of hyperpersonalization in AI, the capabilities of Full RAG for advanced personalization, and strategies for managing complex data integrations for deploying cutting-edge AI solutions.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024Neo4j
Neha Bajwa, Vice President of Product Marketing, Neo4j
Join us as we explore breakthrough innovations enabled by interconnected data and AI. Discover firsthand how organizations use relationships in data to uncover contextual insights and solve our most pressing challenges – from optimizing supply chains, detecting fraud, and improving customer experiences to accelerating drug discoveries.
Sudheer Mechineni, Head of Application Frameworks, Standard Chartered Bank
Discover how Standard Chartered Bank harnessed the power of Neo4j to transform complex data access challenges into a dynamic, scalable graph database solution. This keynote will cover their journey from initial adoption to deploying a fully automated, enterprise-grade causal cluster, highlighting key strategies for modelling organisational changes and ensuring robust disaster recovery. Learn how these innovations have not only enhanced Standard Chartered Bank’s data infrastructure but also positioned them as pioneers in the banking sector’s adoption of graph technology.
GridMate - End to end testing is a critical piece to ensure quality and avoid...ThomasParaiso2
End to end testing is a critical piece to ensure quality and avoid regressions. In this session, we share our journey building an E2E testing pipeline for GridMate components (LWC and Aura) using Cypress, JSForce, FakerJS…
Building RAG with self-deployed Milvus vector database and Snowpark Container...Zilliz
This talk will give hands-on advice on building RAG applications with an open-source Milvus database deployed as a docker container. We will also introduce the integration of Milvus with Snowpark Container Services.
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionAggregage
Join Maher Hanafi, VP of Engineering at Betterworks, in this new session where he'll share a practical framework to transform Gen AI prototypes into impactful products! He'll delve into the complexities of data collection and management, model selection and optimization, and ensuring security, scalability, and responsible use.
How to Get CNIC Information System with Paksim Ga.pptxdanishmna97
Pakdata Cf is a groundbreaking system designed to streamline and facilitate access to CNIC information. This innovative platform leverages advanced technology to provide users with efficient and secure access to their CNIC details.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
20 Comprehensive Checklist of Designing and Developing a WebsitePixlogix Infotech
Dive into the world of Website Designing and Developing with Pixlogix! Looking to create a stunning online presence? Look no further! Our comprehensive checklist covers everything you need to know to craft a website that stands out. From user-friendly design to seamless functionality, we've got you covered. Don't miss out on this invaluable resource! Check out our checklist now at Pixlogix and start your journey towards a captivating online presence today.
20 Comprehensive Checklist of Designing and Developing a Website
[RakutenTechConf2013] [E-2] HTML5 in Rakuten
1. HTML5 in Rakuten
HTML5 Project Team
Creative & Web Design Department, Rakuten, Inc.
http://www.rakuten.co.jp/
This presentation has animations and movies.
This version cannot show them correctly.
6. Development Unit (DU)
Business Unit
Business Unit
Business Unit
Business Unit
Business Unit
HTML5 Project Team Overview
・・・
Infrastructure
Database
Web Service
Smart Device App
Web API
etc...
6
7. HTML5 Project Team Overview
Development Unit (DU)
Infrastructure
Database
Web Service
Smart Device App
Web API
etc...
Business Unit
Business Unit
Business Unit
Business Unit
Business Unit
Creative & Web Design Department (CWD)
・・・
Web Creation
UX Design
Web Analytics
SEO
Web Performance
HTML5 Project
7
13. Today’s Agenda
HTML5 Evangelization in Rakuten
Jose Segura
Rakuten gateway Web App Development
Tomoko “Mon” Monzen
Web Storage ~ Over the Origin ~
Ryosuke “Ryan” Tsuji
Rakuten Technology Conference Web Site
Shinsuke “Marty” Yamada
Tools & Development Flow
Tsutomu “Oga” Ogasawara
13
14. HTML5 Evangelization
Jose Manuel Segura Alvarez
HTML5 Project Team
Creative & Web Design Department, Rakuten, Inc.
http://www.rakuten.co.jp/
15. Table of contents
1 About myself
2 HTML5 in Rakuten
3 HTML5 Project Team Activity
15
16. Self Introduction
Jose Manuel
Segura Alvarez
Role
HTML5 Evangelist
Previous
experience
Mobile websites (dumb & smart
phones), desktop sites, native
smartphone Apps, SEO, server
administration, Wordpress.
Contact
jose.segura@mail.rakuten.com
@ungatonipon
33. HTML5 Implementation Guide
Know-how of HTML5 features is divided in
18 chapters.
1. Introduction
1.1 HTML5 Merits
3.1 DOCTYPE and <header>
1.1 Checklist
3.2 Section and Outline
3.3 Elements and Attributes
2. How to implement
3.4 Forms
3.5 Microdata
3.6 Multimedia
3. HTML
3.7 Graphics
4.1 File API
4. JavaScript API
3.8 Application Cache
4.2 Drag & Drop
4.3 Web Storage
5.1 CSS3
5. CSS
4.4 Geo Location API
5.2 Web fonts
5.3 Media Queries
33
34. HTML5 Implementation Guide example
• Video codecs compatibility, how to
implement Drag & Drop, CSS3 features...
34
52. How to make Web App
• Flat Design (iOS7)
• HTML5, CSS, jQuery, Web Fonts
• iScroll
• Effective Development
(Sass, compass, grunt, script
concat&uglify, git)
52
69. Save data to iframe
iframe
Post Message API
rakuten.co.jp
other.rakuten.co.jp
69
70. Save data to iframe
iframe
Post Message API
rakuten.co.jp
other.rakuten.co.jp
70
71. Save data to iframe
var iframe = document.createElement(„iframe‟);
iframe.style.display = „none‟;
iframe.src = „https://other.rakuten.co.jp‟;
document.body.appendChild(iframe);
iframe.addEventListener(„load‟, function() {
setTimeout(function() {
iframe.contentWindow.postMessage(
JSON.stringify(data),
„https://other.rakuten.co.jp‟);
}, 0);
});
71
72. Save data to iframe
iframe
Post Message API
rakuten.co.jp
other.rakuten.co.jp
72
73. Save data to iframe
window.addEventListener(„message‟, function(e) {
var data = JSON.parse(e.data);
if(e.origin !== „http://rakuten.co.jp‟) {
return false;
}
localStorage.setItem(data.key, data.value);
setTimeout(function() {
e.source.postMessage(response, e.origin);
}, 0);
});
73
74. Get data from iframe
iframe
Post Message API
rakuten.co.jp
other.rakuten.co.jp
74
75. Get data from iframe
iframe
Post Message API
rakuten.co.jp
other.rakuten.co.jp
75
76. Get data from iframe
//almost same with save case
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
iframe.contentWindow.postMessage(data, origin);
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
window.addEventListener(„message‟, function(e) {
var data = JSON.parse(e.data);
if(e.origin !== „http://other.rakuten.co.jp‟) {
return false;
}
callback(data);
});
76
77. Get data from iframe
iframe
Post Message API
rakuten.co.jp
other.rakuten.co.jp
77
78. Save data to iframe
window.addEventListener(„message‟, function(e) {
var data = JSON.parse(e.data);
if(e.origin !== „http://rakuten.co.jp‟) {
return false;
}
localStorage.getItem(data.key);
setTimeout(function() {
e.source.postMessage(response, e.origin);
}, 0);
});
78
79. Plugin
I created plugin as we can use it like
native Web Storage.
var crossOriginStorage = new ExtendedLocalStorage(iframe URL);
crossOriginStorage.setItem(key, value, callback);
crossOriginStorage.getItem(key, callback);
crossOriginStorage.removeItem(key, callback);
79
97. Sass‟s features
• Fully CSS3-compatible
• Language extensions such as variables, nesting,
and mixins
• Many useful functions for manipulating colors and
other values
• Advanced features like control directives for libraries
• Well-formatted, customizable output
• Firebug integration
97
102. Compass‟s features
• Experience cleaner markup without presentational
classes.
• It‟s chock full of the web‟s best reusable patterns.
• It makes creating sprites a breeze.
• Compass mixins make CSS3 easy.
• Create beautiful typographic rhythms.
• Download and create extensions with ease.
102
121. Technology Conference Site
tools & Development Flow
Tsutomu Ogasawara
HTML5 Project Team
Creative & Web Design Department, Rakuten, Inc.
http://www.rakuten.co.jp/
137. What’s PhantomJS?
$ phantomjs phantom_config.js common.html#index > index.html
Command
Script
Template
Page
Generated HTML
• Load ”common.html” as a common
template
• Load a page template
• Load data
• Execute underscore.js to merge
the templates and the data
137
138. What’s PhantomJS?
$ phantomjs phantom_config.js common.html#index > index.html
Command
Script
Template
Page
Generated HTML
• Output merged HTML
138
143. As a result...
✓ Frequently update
✓ SEO friendly
✓ Without server-side script
We could develop efficiently
with Front-end technologies
143
144. Today’s Agenda
HTML5 Evangelization in Rakuten
Jose Segura
Rakuten gateway Web App Development
Tomoko “Mon” Monzen
Web Storage ~ Over the Origin ~
Ryosuke “Ryan” Tsuji
Rakuten Technology Conference Web Site
Shinsuke “Marty” Yamada
Tools & Development Flow
Tsutomu “Oga” Ogasawara
144
Hello everyone.My name is Tsutomu Ogasawara from the Creative & Web Design Department in Rakuten.Welcome to the technology conference and welcome to our session.Today we would like to talk about HTML5 in Rakuten.(余裕があれば)I’m surprised at so many people and I’m getting nervous.I want to know how many people there are.Please raise your hand if you are front-end engineer or designer?back-end engineer?
In the last few years, HTML5 began to be really used in many services.Of course, Rakuten is also introducing HTML5 technologies to our own services as a significant technology.Especially most of the smartphone sites are written in HTML5.Today we would like to introduce our cases of HTML5 and explain the inside of the Technology Conference site.
Before that, Please let me introduce myself.I am Tsutomu Ogasawara. a manager of the HTML5 Project Team.I joined Rakuten in July last year.Before Rakuten, I worked for a Web service company as a technical director and UI/UX designer. and worked for an electronics company as a UI designer and software engineer.
Next I would like to introduce our HTML5 Project Team
There are so many services and businesses in Rakuten such as Rakuten Ichiba, Bank, Travel, Insurance, card, and so on.They are operated by individual organizations. We usually say it “Business Unit”.And there are some horizontal organizations. Mainly, the Development Unit and the Creative & Web Design Department.
We call the Development Unit, “DU” DU is responsible for the overall development,from infrastructure to smartphone app development.
And theCreative & Web Design Department, which we call CWD is responsible for various areassuch as visual design, user experience design, Web analytics, SEO, Web Performance, and so on.TheHTML5 Project Team was established in CWD last year.We are working on various activities collaborating with many teams.
Our missions are,R&DResearch latest technologies and develop prototypes,
EvangelizationPublish the implementation guide, propose our ideas for an improvement to business units and make presentations at meetings to share our knowledge.
Supportwe help business units to develop web sitesand we provide technical advice on HTML5 features.
Through these activities, we improve quality, performance and productivity of Rakuten service
As the result, we would like to provide good user experience to customers in the world.
OK, Let’s move on to HTML5 topics,First, Jose is going to talk about HTML5 evangelization in Rakuten.Next is Mon, Mon will talk about Rakuten gateway applicationNext, Ryan will talk about Web Storage technique.Then Marty introduce the inside of the Technology Conference site.And I will talk about the tools and development flow of the conference site.Jose, please take it away.
My name is Jose Manuel Segura Alvarez, but as you see, it is a really long name so...
... I made it shorter, like this.
I am going to talk about the current situation of HTML5 in Rakuten
In the last months, more and more services in Rakuten are using HTML5 features, specially on mobile devices.Let’s see some cases.
In the last months, more and more services in Rakuten are using HTML5 features, specially on mobile devices.Let’s see some cases.
Technology Conference 2013 site uses Media Queries to achieve Responsive Design. It also uses Canvas and Web Storage features.
Recipe site uses JavaScript to draw a nice menu and Web Storage to remember the recipes visited that day in the Memopad.
CSS3 animation in Rakuten Securities shows a very cute city and can be played in any kind of mobile device.
Rakuten Card uses new features of HTML5 Forms to improve the usability of the service, allowing the user to finish the Forms faster.
Rakuten Travel: HTML5 supports geolocation natively on mobile devices.
Rakuten.com Shopping: Web Fonts improve the look of your site without a performance hit. You can zoom in or out icons or change its color without using new resources.
Rakuten.com Shopping: Web Fonts improve the look of your site without a performance hit. You can zoom in or out icons or change its color without using new resources.
Microdata provides rich snippets information to search engines.
Microdata provides rich snippets information to search engines.
The HTML5 Implementation Guide is a website in Confluence, which is the internal wiki system we use at Rakuten.
Goal: Expand the use of HTML5 in Rakuten.
It has 18 chapters and it is basically a manual that explains how to use HTML5 features in our websites. For example...
we have video codecs compatibility information, all the different graphic formats, how to integrate drag and drop, how to use CSS3...
The HTML5 Project Team presentedthree times at ASAKAI (weekly company meeting), CTO Summit and other tech conferences. Of course, this conference, too!
The HTML5 Knowledge Base is a site in Confluence (Wiki service for employees) that collects all our activity and resources.
We also use internal Social mediato promote HTML5 and the Team’s activities inside the company.
We directly support each service to improve their Forms using the latest HTML5 Form features to achieve local validation.
HTML5 is the present and future of the Internet.I will support all Rakuten business to use HTML5, and push its boundaries even further in the future.
Thank you for your attention. As I mentioned before, we’ll now see how Rakuten Gateway Web App was created. Please welcome my colleague Mon.
Thank u Mon.She is Madonna in our Team.Hello Everyone.Now I’ll talk about HTML5 web storage.
My name is Ryosuke Tsuji. My Rakuten’s name is Ryan.I’m front-end engineer now.My expertise is these languages.And if you are interested in me, please feel free to contact.And as you can see, I’m a runner.My created website are following.
Kobo glo
Rakuten Insurance
Rakuten Card
Rakuten Security
Many smartphone sites and so on.
Now, I talk about HTML5 web storage.I think many developers uses this function, because it’s useful and it’s supported by even Internet Exproler8.But, it have a problem. We can’t access web storage over Cross Origin like this.
In this case, protocol is different. So we can’t.In this case, uses subdomain. So we can’t.In this case, domain is different. So we can’t!You may think it’s matter of course.But we often use subdomain in one service, and have http and https website in same domain.If you want to share data, you will use server like this.
First, save data to server on rakuten.co.jp.Second, get data from server on sub.rakuten.co.jp.It’s painful because server side program is required.So I created javascript library to solve this problem.
This is specification.I utilized iframe and HTML5 Post Message API.First, save data to iframe(other.rakuten.co.jp) on rakuten.co.jp with post message API.Second, get data from the iframe on sub.rakuten.co.jp with post message API.Thus We don’t need server side programming and resource.
Wonderful…As a result, we can share data only in client side like this.
And Rakuten solar use this plugin.
Next I’ll explain about practical source code sample.First, post message to iframe.
At first, the source code of main website.
Create iframe DOM Object.Make iframe hidden.Set source of iframe.Append iframe to HTMLAfter that, Set load event to iframe. We need setTimeout method because postMessage method specification of IE8 is different from that of other browsers.Finally we can use postMessage API like this.We need to make data change to JSON because IE8 only support string data.
Next, the source code of iframe.
Set message Event to window object.Get data from event object.Check whether message event origin is your main website origin or not.It’s so important for security. If you don’t do it, everyone can get your website’s web storage data.Don’t forget it.Set data to Web Storage of iframe.Finally, return response data if you need.
Next I’ll explain about practical source code sample.First, post message to iframe.
At first, the source code of main website.
Send postMessage part is almost same with save data case.In addition to it, we need to set message event to window object.Get data from event object.Check origin for security.Call callback function for getting some data.
Next, the source code of iframe.
Iframe source code is almost same with save data case too.Changing method setItem to getItem is only difference.
Icreate plugin as we can use it like native Web Storage.This is example.Create instance of this plugin.And we can use same method with native Web Storage.But post message method is async function. So we need callback to do something after getting, saving or removing data.If you are interested in this plugin, please ask me later.
Thank you!
Good after noon everyone.How about the conference? So fun?Today I’d like to talk about insights of the Technology Conference Website.At first, I’d like to introduce myself quickly,
Ladies and gentlemen, have you seen the Technology Conference website?皆さんテクノロジーカンファレンスのウェブサイトをご覧なりましたか?
This is the website.Of course, we created this website to publish the information about this event.こちらそのウェブサイトです。このプロジェクトの一番の目的はもちろん、イベント情報を告知するためです。
This website has 5 pages.★Top, ★Speakers, ★Timetable, ★Access and ★Event reportIn addition We had one more goal in this project.トップページ、スピーカー、タイムテーブル、アクセス、そしてイベントレポート全部で5ページあります。しかし、私たちにはもう一つ別の目的がありました。
It’s Challenging to use the latest web trends.(It’s not Back to the future)Our challenges are:それは最新webトレンドへのチャレンジです。私たちのチャレンジは、、、
レスポンシブwebデザイン
インタラクティブデザイン
Html5テクノロジー
So,Let me introduce these our challenges.では今回の挑戦についてご紹介させていただきます。
First is about Responsive web design. As you know, RWD is a web design approach to optimize the layout in different kind of devices. This approach is becoming very popular since the last year.まずは「レスポンシブwebデザイン」についてです。ご存知の通り「レスポンシブWebデザイン」はマルチデバイスに対応するための制作手法です。去年ぐらいから話題になっているなってきています
In this website, we set 2 breakpoints and designed 3 layout patterns for Desktop, Tablet and Smartphone devices.当サイトは2つのブレークポイントを設け、PC、タブレット、スマートフォンの3つのレイアウトパターンを制作しました。
We use Media queries in the approach.However, we can write code in a variety of ways.私たちはRWDのなかで「Media queries」を使用します。とはいっても、色々な記述方法があると思います。
Write code exclusively, like this[pase].スタイルを分けて各方法
Overriding base style, like this[pose].But, these ways are often complicated and unmanageable★ベースになるスタイルをオーバーライドする方法しかし、これらの方法は管理が大変で複雑化してしがちです。
So, we tried Sass, which is meta language of CSS.私たちは今回、CSSメタ言語Sassにトライしました。
Sass is an extension of CSS.You can use variables, nested rules and mixins in Sass. It enable us to develop CSS efficiently and conveniently.SassはCSSを拡張し、変数、ネスティング、ミックスイン等、より便利に効率よく記述することを可能にしてくれます。
This is an example of Sass code.★The variables are defined in each @Media section★The external files are also imported in the sections.こちらがSassで記述した場合の一例です。変数と外部ファイルの読み込みが各@mediaの中で行われています。
This is the external style file.As you can see, each screen size style is defined in one section.It’s more readable compared with using raw CSS.こちらが別ファイル「style」の中身です。一つのスタイル定義の中に各画面サイズのスタイルを一緒に記述しています。生のCSSと比較して格段に整理して記述することができました。
This is the CSS codeconverted from the Sass.We need to compile Sass to CSS.★Don’t forget it!これはSassコンパイルしてCSSに変換したものです。SassファイルはCSSへコンパイルする作業が必要です。
We also introduced Sass framework, Compass.合わせてSassのフレームワーク、Compassを使用しました。
Compass also provide lots of useful functions like this.We can develop CSS more efficiently.Compassはあらかじめ便利な機能がたくさん用意されています。より効率的なCSS開発が可能です
We should also consider about image handling in theResponsive web design.When using bitmap images, we need to prepare for severalimages for high resolution displays such as Retina display.レスポンシブデザインでは、画像の扱いについても考える必要があります。ビットマップ画像はRetinaディスプレイなど高解像度デバイス用に複数用意しなければなりません。
SVG is a vector format graphics. Vector graphics are shown beautifully in any displays.SVGを使いましょう。SVGはベクター形式のため、様々な解像度で綺麗に表示することができます。
This time, we created most of the icons using SVG.By using SVG, we could reduce image data weight compared with bitmap images.私たちは今回、ほぼ全てのアイコンをSVGで作成しました。SVGにすることで、ビットマップに比べてファイルサイズ軽減することもできました。
SVG has a lot of merits, however, we cannot use it in old browsers.So, we need to display an alternative image when the browser does not support SVG.メリットの多いSVGですが、古いブラウザでは使えません。対応していない場合は代替画像を表示する必要があります。
We resolved this issue by using Modernizr.It can detect browser’s HTML5 & CSS3 features.私たちは今回、Modernizrを使いこの問題を解決しました。Modernizrはブラウザが使用可能なHTML5&CSS3の機能を検出することができます。
This is an example code. Modernizr adds classes to <html> depending on the browser’s features.If the browser does not support SVG, no-svg class is added to <html>. So, we can easily show an alternative image using the classes.こちらはModernizrを使用した例です。Modernizrはブラウザがどの機能に対応しているかどうかのクラス名を<html>に追加してくれます。もし、svgに対応していない場合は、no-svgクラスが追加されるので、このようなコードで代わりにpngを表示することができます。非常に簡単に代替画像を表示することができます。----- Meeting Notes (10/24/13 10:56) -----分解
Next, I'd like to introduce some interactive effects used in the website.次にこのサイトにちりばめられたインタラクティブデザインについていくつかご紹介させて頂きたいと思います。
This is the effect of opening message.The content spreads out while moving the other objects away.This effect is made with CSS3 transitions.トップページのオープニングメッセージの部分です。クリックすると周りのオブジェクトをどかしながらコンテンツが広がります。こちらはCSS3を使用してアニメーションさせています。
We created an intuitive photo gallery to introduce the last year’s event.This effects are made with JavaScript and CSS3 transforms.こちらは昨年のイベントの様子を紹介した「イベントレポート」です。このページでは写真を直感的に操作できるインターフェースを実装しました。JSとCSS3を組み合わせて動きを再現しています。
Please look at this carefully.The background is slightly changing by mouse movement.This is made using Canvas, that is one of the HTML5 features.ご注目ください。背景がマウスの動きよって、微妙に色が変化したりしています。これはCanvasを使用して描画しています。
We chose createjs which is one of the useful canvas library for creating this content.Canvasを使ったリッチコンテンツを制作するためCreateJSを使用しました。
This is an example code that draws a simple rectangle using createjs.It‘s very easy to understand.こちらはcreatejsを使用して簡単な四角形を描画するコードの例です。とても簡単です。
Besides Canvas, we also used Web Storage.Canvas以外にもhtml5のweb storageを使いました。
We implemented a notificationfeature using Web Storage.ノーティフィケーション機能を実装しました
We also used Web storage in the Timetable page.The user can bookmark the sessions like this.The bookmark date is stored in the Web storage.This filtering function allows to narrow the sessions like this.We design the layout for smart devices as well.This page was most challenging content for us in this project.「タイムテーブル」でも同じくWeb storage を使用しました。ユーザーが自分の見たいセッションをブックマークする機能を実装しました。データはWeb storageに保存されます。このフィルタリング機能はセッションを絞り込めます。
Conclusion.I introduced about our activities in the technology conference website.We enjoyed this project and we think we’d like to try new challenges again in this project next year.以上、今回テクノロジーカンファレンスウェブサイトでの取り組みをご紹介しました。
Rakuten will make use of the cutting-edge technologies actively to create more attractive contents in the future.There are lots of opportunities to challenge new things as engineer in Rakuten.Let's work together here, if you are interested in.楽天ではこれからもインターネットカンパニーとして最新トレンドを積極的に活用し、より良いサービスを構築していきます。エンジニアとしてもチャレンジできる環境がたくさんありますので、興味がある方は是非楽天で一緒に働きましょう。
Thank you for your attention.Please let me welcome back our super manager Oga. He is going to talk about the development flow and the tools we used for the Technology Conference website.Please Oga.ご清聴ありがとうございました。次は再びOgaです。彼はこのプロジェクトの開発環境/ツールについてお話しします。
Thank you Marty,Next, I would like to explain the tools and development flow of the conference site.We utilized many technologies not only for the contents but also development flowin order to improve the productivity.Let me introduce the tools and flow we used.
There were 3 requirements for this site.
Frequent updates,Information of speakers, sessions and time table wereupdated frequently until today.
SEO friendlyWe could not generate contents dynamically by using JavaScript to be SEO friendly.
Without server-side scriptWe could not use server-side script or CMS
Due to the reasons, we decided to generate static HTML filesfrom the information data and templates.
This shows the development flow and tools we used.To generate static HTML files from the templates and the information data which we received from the conference staff.
We used underscore.js as a template engine.
Template engine generates HTML, from data and templates.This is an example of how to generate HTML files.
This is a JSON file including speaker information.We received it from the conference staff.
This is a template file which defines the HTML of the page.img, name, title are variables.
The template engine assigns the data to variables in the templatethen an HTML file is generated like this.
In order to executeunderscore.js to generate HTML, we used PhantomJS.
PhantomJS is a headless webkit browser engine. You can run the browser engine from command line and you can control it by JavaScript.It is generally used for web site testing, screen capturing, page automation, and so on.
It is difficult to explain how PhantomJS worksbut let me try it.This is an example of the command.
You can call phantomjs to execute the control script, like this.
The script loads the template and data.Then execute underscorejs to merge the templates and data.
Finally it generates a HTML file.
Using this mechanism, we can update the information in several pages at the same timewithout editing HTML files directly.And the contents are SEO friendly because text data is included in the HTML files.
We also used Sass preprocessor to write CSS efficiently.
And these processes are run automatically by Grunt.
Our team and the conference staff exchanged files such as the JSON files and generated files by using Stash which is a Git repository like GitHub.
As a result, we could meet these requirements----and we could develop efficiently by using Front-end technologies.That concludes my part. thank you for listening.
Today, we explained our HTML5 activities.
As we explained, we could accumulate a lot of knowledge through these past activities.
And we should also expand the knowledge to all Rakuten services around the world.such as the rich user experience, high performance, productivity, and so on.Expanding HTML5 benefits to all Rakuten Services is our next challenge for the future.
To do so, we should not only be a creator but we should be also an engineer more.Because, as you know, front-end technology is evolving everyday.We can’t create attractive contents efficiently without various engineering skills.So we just started a new activity with an engineering approach.
We have created many contents independently, but it was not productive.
So we will develop a kind of framework like Twitter Bootstrapto focus on the feature part,and not to write same code every time.
And, we would like to prepare tools like HTML5 Boilerplate and Initializr which is a famous template generatorand share the configuration files such as Grunt, to improve our productivity.
And, we should prepare the development environment to execute build, test, deploy automatically.
And we should also consider our development processto maximize our performance.
As you can see, we should cover various areas and there are so many technologies to use We will try to develop the front-end engineering environment to improve our productivity. This is also a big challenge for us.
To achieve this activity, we need to be a team of people with a variety of engineering skills.So we seek for front-end engineers. Please speak to us after the session or at the bear bash if you are interested in us.----Let’s work together!!!
That’s all from HTML5 Project Team. Thank you for listening.Do you have any questions?