Bliblidotcom - AMP And PWA

Aug 20, 2017Download as PPTX, PDF1 like382 views

Presentation for Google Mobile Web Hackathon. Implementation of AMP and PWA technology for better mobile web experience.

Google Mobile Web Hackathon
AMP x PWA to Fight againts High Bounce Rate and Low Conversion Rate
Cindy, Febi, Ifnu, Irfan. July, 7th 2017

Who We Are ?
• Cindy R Kalensang, Product Manager
• Hidayat Febiansyah, Principal Engineer
• Ifnu Bima, Development Manager
• Irfan Maulana, Sr. System Development
Engineer

The Problem
High Bounce Rate
• Mobile App bounce rate is 85% lower than
Mobile Web
• Desktop bounce rate is 20% lower than
Mobile Web
Low Conversion Rate
• Mobile App conversion rate is 8.7x Mobile
Web
• Desktop conversion rate is 5.7x Mobile Web
Mobile App uninstall rate
• One of the main reason that drives customer to
uninstall App is due to customer phone
storage limitation
“Mobile Web generates the highest traffic yet it has the highest bounce rate and lowest
bounce rate”

The Problem
Page load time is the website first impression for the user
With the implementation of AMP and PWA altogether
We are aiming to provide seamless browsing experience which will lead to engaged users
and results in higher conversion rate and more loyal customers

AMP Solution
• AMP for fast load in first time
• AMP give better search result in mobile
• AMP for reduce bounce rate

AMP Tag
• Current :
amp-analytics
amp-img
amp-carousel
amp-selector
amp-social-share
amp-sidebar
• Next :
amp-state
amp-bind
amp-install-
serviceworker
amp-iframe
amp-list

AMP Implementation and Demo
• Will be live in next 2 weeks
• Done by 3 person, 1 employee (Dita) and 2
interns (Nikolas and Geraldo)
• Planning, development and testing ~ 2 months
• AMP initative was finalized after attending
google mobile conference here on february

Category Page (Before x After AMP)
NON-AMP AMP

Search Result Page (Before x After AMP)
NON-AMP AMP

Merchant Page (Before x After AMP)
NON-AMP AMP

Product Detail (Before x After AMP)
NON-AMP AMP

PWA Solution
• PWA for better engagement
• PWA for alternative apps with no install need
• PWA give shortcut in homescreen
• PWA for caching static resources
• PWA for fast load in repeat view

Blibli.com Travel (Before x After PWA)
NON-PWA PWA

The document discusses how optimizing an app's back-end performance through SDKs can improve user retention. It notes that while front-end design is important for retention, back-end issues like errors, timeouts and slow performance caused by third-party integrations negatively impact the user experience. The document cites studies that found correlations between faster app performance and increased sessions/reduced churn. It recommends measuring app speed, errors and timeouts across countries, and optimizing third-party integrations to improve retention.

Grade BookMichael Lang

This document summarizes a proposed grade book application created by Tristan Alexander, Sean Joiner, and Micheal Lang. It outlines the creators and their roles, describes the current issues with the existing grade book app and stakeholders. The proposed application would make the current grade book more user-friendly by developing it as an executable program instead of a web app, keeping the same functionality. It discusses the scope, solution, quality assurance testing, proposed costs around $50,000, potential risks, and invites questions.

AppDRIVE Deck_E-mailSamuel Lim

This document discusses AppDrive, a company that helps apps acquire users through targeted mobile advertising campaigns. It offers both mass and quality-driven campaigns to drive installs at scale. Campaigns can be incentivized, where users are paid to install apps, or non-incentivized. The document provides examples of campaign performances for various apps, showing install numbers achieved within timeframes ranging from 1 day to 1 month. It emphasizes transparency, brand safety, quality user engagement, and end-to-end campaign management.

Richard Downey, The Specialist WorksWhite Nights Conference

This document discusses TVforApps, a company that specializes in TV advertising for mobile apps. It summarizes: 1) TVforApps has four divisions and focuses on growing brands globally in the UK and US through owned offices and partner networks. It has over 10 years of experience in mobile acquisition advertising. 2) The document seeks to debunk three myths about TV advertising: that it is inflexible, agencies are not responsive, and the effects cannot be properly tracked. It outlines a more flexible approach to booking and optimizing live campaigns using data on app installs, opens, and in-app actions. 3) Metrics like cost per install and in-app conversions can be tracked in real

Yelowsoft delivers super app to bbr one of the biggest ride hailing companies...Yelowsoft

SparkAbhinav Kuru

The document describes a proposed mobile app called SPark that aims to help users find free street parking more efficiently. It would show available spots, provide turn-by-turn directions to empty spots, and act as a complete street parking assistant. The document outlines goals for a target user persona of a young professional commuter in San Francisco, as well as key performance indicators and an initial launch plan to target the large segment of unmetered street parking.

Why Your Business Needs a  Mobile-Responsive Website to SurviveMopro

Monetizing Mobile AppsDave Stevenson

The document discusses 10 ways to monetize mobile apps: 1) Paid apps, 2) Advertising, 3) In-app purchases, 4) Web app subscriptions, 5) Subscriptions, 6) Sponsorships/promotions, 7) Lead generation, 8) Affiliate sales, 9) Analytics, and 10) Don't monetize. It provides details on each approach and considerations for user expectations, costs, market size, and doing the math to estimate potential revenue. The document concludes by noting different monetization strategies can be combined and that paid apps and advertising are easy starting points.

Angular PWAVinci Rufus

This document provides an overview of progressive web apps with Angular, including what a PWA is, the key aspects like app shell model, instant loading, and offline support. It discusses how to sell the benefits of a PWA to stakeholders and describes the minimal viable components needed to create one using Angular CLI or Ionic, including a service worker to enable features like offline support. Examples of existing PWAs are also provided.

[Startup Nations Summit 2014] Competition - China - BeijingStartupNations

This document discusses VMFIVE's playable advertising solution which allows users to try mobile apps and games through an interactive demo without downloading. It has seen conversion rates increase 50-300% and retention rates increase 120-250% after being tested in China and Japan. New products in 2014 include AdVideo for cross-platform HD video ads and AdPlay for branding ads. VMFIVE aims to launch in Taiwan, Japan and China in Q4 2014 and sees 2015 as a year of opportunity for expanding globally.

Monetizing with Mobile AppsSeshu Karthick

This document discusses six ways to monetize a mobile app: 1) Paid app, 2) Advertising, 3) In-app purchases, 4) Merchandizing, 5) Subscriptions, and 6) Sponsorships. It provides details on each method, including typical revenue models. For example, with a paid app Apple keeps 30% of revenue but customers are retained for life. Advertising requires many downloads to generate sizable money. In-app purchases provide flexibility with options like consumables and upgrades. The document promotes a company that develops optimized mobile apps and offers extensive reach and profitability through monetization solutions.

Mobile App Development SingaporeMYOB!Assist

MYOB!assist provides mobile-compatible website development services to allow companies to share information about their business on mobile devices. They offer browser apps and iPhone apps to make websites accessible on mobile. Browser apps are developed, uploaded and then available for users to download. Features include cross-platform compatibility, media content, design control, analytics and ease of use. Their pricing plans start at $50/month for basic browser apps and $2,000 for custom iPhone apps. They are located in Singapore.

Gymometer Presentation 1MohamedDarwiche

BabyKEM- is developing an iOS app to help gym administrators and patrons manage crowding. The app would allow administrators to track occupancy levels and patrons to check occupancy before visiting. It aims to address issues like overcrowding, difficulties scheduling workouts due to unpredictability of gym capacity, and downward attendance trends caused by these issues. The app would integrate with gym check-in systems and surface real-time occupancy percentages to help users plan their visits.

Apspstore Search Optimization (ASO) – Where to Start?Nguyen Minh Quang

Agora - A Marketing PlanJahnavi Shah

This document proposes a new Android app to help roadside vegetable and fruit vendors in India. The app would allow vendors to easily update prices, select the items they are selling, create bills for customers, and offer discounts. Key features include supporting multiple Indian languages, working offline without internet, and being lightweight to run on low-end smartphones. The goals are to bring more vendors onto the platform within a year and help them while avoiding losses from small pricing discrepancies. Initial earnings will be low but customer understanding and value of the app is expected to grow over time. The strategy is to start small, test the app, innovate based on feedback, and employ community building tactics and emotional branding.

Progressive Web AppVinci Rufus

Progressive Web Apps (PWAs) are user experiences that have the reach of the web and feel like native apps. They are reliable, fast, and engaging. Key aspects of PWAs include using HTTPS, an app shell model, service workers to enable offline support, and manifest files to allow adding the app to the home screen. The document provides an overview of core PWA concepts and technologies and how to evaluate if a web app qualifies as a PWA.

Paid Apps Economy / Nir Pochtergeektimecoil

Lightricks is an app development company based in Jerusalem that has found success with paid apps like Facetune and Enlight. While the paid app model has limitations like competitors releasing free versions and difficulty gaining recognition, it allows developers to earn money from day one and optimize more easily based on direct metrics. Lightricks recommends focusing on great products, influencers, PR and Facebook ads to drive sales, while also experimenting with untested strategies and documenting results. Burst advertising can help new paid apps reach top charts and gain organic users in a cost-effective way.

How to build a food delivery app like zomato OnGraph Technologies Pvt. Ltd.

1208jegerProcontent.Ru Magazine

This document summarizes a presentation about acquiring loyal mobile app users. It discusses the history of mobile user acquisition from the early days before app stores to the current landscape. It then covers the user's options for acquisition today, including display advertising, PR, paid incentivized installs, and non-incentivized performance marketing. The document recommends focusing acquisition campaigns on key countries, switching to steady spend for quality over burst campaigns, retargeting users to bring them back to the app, and optimizing campaigns with account managers.

Use App Store Optimisation to increase your mobile profitsLeadmill

JSFoo 2016 React Native WorkshopChandra Mohan

This document outlines an agenda for a workshop to teach JavaScript and web developers how to build mobile apps using React Native. It introduces React Native, explains why it is useful for building cross-platform mobile apps, demonstrates a sample app, and provides challenges for attendees to build basic React Native apps with user interfaces, lists, navigation, and native platform integration. The document encourages questions and lists references and support resources for learning more about React Native.

Startup & Mobilise 21.09.2016Sonin

This workshop provides information on developing a successful mobile app business, covering topics such as understanding the mobile landscape and user behaviors, developing your app idea, choosing a platform, the development and launch process, user acquisition and retention strategies, and scaling the business. It emphasizes the importance of thorough research, focusing on user needs, continual improvement, and long-term engagement to achieve retention and revenue goals.

11 Creative Tips for Effective CPE Campaigns - ironSource | Casual Connect Te...ironSource

While cost-per-install (CPI) may have dominated as the go-to metric for mobile marketers, we’re starting to see media buyers opting for more nuanced metrics like cost-per-engagement or CPE to measure the performance quality of their mobile campaigns. ironSource VP Media Oren Cohen covered the increasing importance of quality based metrics such as CPE, the advantages and disadvantages of the metric, and how to implement CPE in your app marketing campaigns. Learn more at www.ironsrc.com Follow us on Twitter @ironSource!

7 Ways to Lose Money Monetizing Apps with AdsAppnext

"Mobile Apps, beyond downloads, what’s next?" by Philippe DumontTheFamily

You thought building, posting and getting your App downloaded was hard? Wait, the toughest part is yet to come! Getting people actually using your App and coming back for more may be (much) harder than you think… During this 45 min. workshop, Philippe Dumont will share how to setup useful KPIs for your App and how to effectively retain, engage and convert users. - Apps: There are downloads and downloads… - The Valley of Fear: you got tons of downloads but no one is using your App… - Achieving the 3 pillars of Mobile ROI: Retention, Engagement & Conversion - What does Mobile Success look like? - What will next-generation Apps look like? Philippe is CEO and co-founder of Azetone, a platform that allow to visually analyze, improve and personalize the Mobile User Experience. He previously co-founded MyFanGroup, a mobile and digital marketing agency after heading Marketing and Communications for Microsoft EMEA as General Manager and CMO from 2002 to 2009.

Food delivery systemDavidMathews49

ResponsinatorMindfire Solutions

Website performance and an introduction to AMPMichael Gearon

Mobile first - one key important aspect in digitalisationHelmi Hasan

More Related Content

What's hot (20)

Monetizing Mobile AppsDave Stevenson

Angular PWAVinci Rufus

[Startup Nations Summit 2014] Competition - China - BeijingStartupNations

Monetizing with Mobile AppsSeshu Karthick

Mobile App Development SingaporeMYOB!Assist

Gymometer Presentation 1MohamedDarwiche

Apspstore Search Optimization (ASO) – Where to Start?Nguyen Minh Quang

Agora - A Marketing PlanJahnavi Shah

Progressive Web AppVinci Rufus

Paid Apps Economy / Nir Pochtergeektimecoil

How to build a food delivery app like zomato OnGraph Technologies Pvt. Ltd.

1208jegerProcontent.Ru Magazine

Use App Store Optimisation to increase your mobile profitsLeadmill

JSFoo 2016 React Native WorkshopChandra Mohan

Startup & Mobilise 21.09.2016Sonin

11 Creative Tips for Effective CPE Campaigns - ironSource | Casual Connect Te...ironSource

7 Ways to Lose Money Monetizing Apps with AdsAppnext

"Mobile Apps, beyond downloads, what’s next?" by Philippe DumontTheFamily

Food delivery systemDavidMathews49

ResponsinatorMindfire Solutions

Monetizing Mobile AppsDave Stevenson

Angular PWAVinci Rufus

[Startup Nations Summit 2014] Competition - China - BeijingStartupNations

Monetizing with Mobile AppsSeshu Karthick

Mobile App Development SingaporeMYOB!Assist

Gymometer Presentation 1MohamedDarwiche

Apspstore Search Optimization (ASO) – Where to Start?Nguyen Minh Quang

Agora - A Marketing PlanJahnavi Shah

Progressive Web AppVinci Rufus

Paid Apps Economy / Nir Pochtergeektimecoil

How to build a food delivery app like zomato OnGraph Technologies Pvt. Ltd.

1208jegerProcontent.Ru Magazine

Use App Store Optimisation to increase your mobile profitsLeadmill

JSFoo 2016 React Native WorkshopChandra Mohan

Startup & Mobilise 21.09.2016Sonin

11 Creative Tips for Effective CPE Campaigns - ironSource | Casual Connect Te...ironSource

7 Ways to Lose Money Monetizing Apps with AdsAppnext

"Mobile Apps, beyond downloads, what’s next?" by Philippe DumontTheFamily

Food delivery systemDavidMathews49

ResponsinatorMindfire Solutions

Similar to Bliblidotcom - AMP And PWA (20)

Website performance and an introduction to AMPMichael Gearon

Mobile first - one key important aspect in digitalisationHelmi Hasan

E-commerce Berlin Expo 2017 - AMP and Progressive Web Apps – Start Fast, Stay...E-Commerce Berlin EXPO

The document discusses how mobile users have moved to a mobile web but the web itself has not kept up. It introduces Accelerated Mobile Pages (AMP) and Progressive Web Apps (PWA) as ways to make the mobile web faster and more app-like. AMP pages load in under one second and are cached, while PWAs use features like web app manifests, service workers, and add to home screen to deliver app-like experiences from the mobile web. The document examines using AMP and PWAs to improve the mobile experience on jobs sites.

Google AMP: High-Speed Pages in Higher EdCaroline Roberts

Google AMP – a framework that optimizes an existing page for mobile use and serves it from the Google AMP cache – promises to make it easier for users to access and interact with your content when they are on mobile devices. This framework achieves major Search Engine Optimization (SEO) goals by speeding up page load times, thereby increasing user satisfaction, especially for students who are mobile-dependent. But is Google AMP a good fit for higher ed content? In this presentation, a developer and a content strategist will present iFactory's current Google AMP projects and suggest approaches tailored to institutions of higher education.

Accelerated Mobile Pages (AMP) to Win Search War in 2017Digital Vidya

Church Apps: What to Know Before You BuyBluebridge

Creating a mobile app for your church is a big deal—one that you should think through carefully by weighing all the options. But where do you start? Bluebridge founders and experts Santiago Jaramillo and Adam Weber explore the pros and not-so-nice cons of each option, including: How much church apps cost What quality level you can expect How much work is involved on your part How long it’s going to take From freelance developers to do-it-yourself websites, we’ll give you the “dirt” on what you can expect.

Improving mobile performanceBhagirath Gaonkar

As mobile device usage has skyrocketed in recent years, mobile applications have emerged as the key engagement channel for businesses to connect with their most valuable customers. Mobile app usage represents more than 85% of total mobile device time, and users now spend more time with apps than they do with television. This makes it imperative to think from a mobile-first perspective and ensure consistent user experience.

E-travel conference 2013 presentation: Creating a successful mobile strategyKasper Hove

This document discusses opportunities and challenges in mobile marketing for travel sites, and outlines a solution momondo implemented. The solution was to [1] create a simple mobile site focused on core functionality like flight searches, [2] hire a part-time app promotion expert, and [3] gradually improve the app. This approach led to positive results, including a 450% increase in mobile traffic and 260% increase in app downloads. Moving forward, momondo plans to invest more in their mobile team and products, and increase mobile advertising.

Apps vs. Mobileronrowan

The document compares mobile apps and mobile websites for small businesses. A survey of over 500 small businesses found that 73% reported a higher return on investment from mobile apps than mobile websites. Customers also preferred apps over mobile sites, with 81% preferring apps. Both apps and mobile sites are important for a complete mobile strategy, according to 81% of businesses. Apps provide benefits like customer loyalty, service, and increased revenue. However, mobile sites have advantages like lower costs and not requiring installation. The document promotes developing both an app and mobile site for a full mobile marketing solution.

What is your mobile strategy?Emily Massey

Apps vs Mobile Websites - Which is Better?Micah Gaudio

The document compares mobile apps and mobile websites for small businesses. A survey of over 500 small businesses found that mobile apps had a higher return on investment and were preferred by customers over mobile websites. Apps were better than websites for getting new customers, customer loyalty, revenue, and communication. However, both mobile apps and websites were considered important by most businesses. While apps provide more functionality, websites have lower costs and are accessible to all mobile users. The document recommends that businesses develop both a mobile app and website for a complete mobile strategy.

Compuware ASEAN APM User Conference 2013 - University of Customer ExperienceCompuware ASEAN

Rafi Katanasho discusses effectively monitoring the customer experience across diverse platforms. He outlines 5 tips: 1) Analyze performance data in relation to user behavior to see where customers are dropping off and optimize key pages. 2) Speed up resolution of user complaints to improve their experience. 3) Report on key business metrics like conversions and revenue to understand the impact of performance issues. 4) Manage third-party services that can impact response times. 5) Unify oversight of different customer channels like web, mobile web, and native apps for a holistic view of the experience.

The Death of the Desktop: The Future For Mobile SEORegan McGregor

AppormobileKeith Longmore

Appro fs3emsemg

The document compares mobile apps and mobile websites for small businesses. A survey of over 500 small businesses found that 73% reported higher returns on investment from mobile apps compared to 27% for mobile websites. Customers also preferred apps over mobile websites, with 81% preferring apps. Both apps and mobile websites are important for small businesses, with 81% saying they are equally important. Apps provide benefits like increased customer loyalty, push notifications, and access to hardware functions. However, mobile websites have advantages like lower costs and not requiring installation. The document promotes developing both a mobile app and website for a complete mobile marketing strategy.

Progressive Web AppSubodh Garg

Olosomo app or_mobileKeith Longmore

The document compares mobile apps and mobile websites for small businesses. A survey of over 500 businesses found that 73% reported higher returns on investment from mobile apps compared to 27% for mobile websites. Customers also preferred apps over mobile websites for accessing business information and services. However, the document concludes that both mobile apps and websites are important for a comprehensive mobile marketing strategy.

Magento PWA Solutions with MobicommerceMobiCommerce

Apps vs Mobile Websites - Push Mobile MarketingMicah Gaudio

The document compares mobile apps and mobile websites for small businesses. A survey of over 500 small businesses found that 73% reported higher returns on investment from mobile apps compared to 27% for mobile websites. Customers also preferred apps over mobile websites, with 81% preferring apps. Both apps and mobile websites are important for small businesses, with 81% of business owners recognizing they are equally important. Apps have advantages like higher customer loyalty, push notifications, and access to device features, while mobile websites have advantages of lower costs and not requiring installation. The document promotes developing both a mobile app and website for a complete mobile strategy.

Apps vs Mobile Website: Which Do I Do?Alan

The document compares mobile apps and websites for small businesses. A survey found that most small business owners see value in both apps and mobile websites. While apps had higher returns on investment, customer preference, and new customer acquisition, over 80% of business owners recognized that apps and mobile websites are equally important. The document provides details on the advantages and disadvantages of each option to help business owners decide what combination is best for their needs.

Website performance and an introduction to AMPMichael Gearon

Mobile first - one key important aspect in digitalisationHelmi Hasan

E-commerce Berlin Expo 2017 - AMP and Progressive Web Apps – Start Fast, Stay...E-Commerce Berlin EXPO

Google AMP: High-Speed Pages in Higher EdCaroline Roberts

Accelerated Mobile Pages (AMP) to Win Search War in 2017Digital Vidya

Church Apps: What to Know Before You BuyBluebridge

Improving mobile performanceBhagirath Gaonkar

E-travel conference 2013 presentation: Creating a successful mobile strategyKasper Hove

Apps vs. Mobileronrowan

What is your mobile strategy?Emily Massey

Apps vs Mobile Websites - Which is Better?Micah Gaudio

Compuware ASEAN APM User Conference 2013 - University of Customer ExperienceCompuware ASEAN

The Death of the Desktop: The Future For Mobile SEORegan McGregor

AppormobileKeith Longmore

Appro fs3emsemg

Progressive Web AppSubodh Garg

Olosomo app or_mobileKeith Longmore

Magento PWA Solutions with MobicommerceMobiCommerce

Apps vs Mobile Websites - Push Mobile MarketingMicah Gaudio

Apps vs Mobile Website: Which Do I Do?Alan

More from Irfan Maulana (20)

Modern Web - an IntroductionIrfan Maulana

This document introduces modern web technologies, including Accelerated Mobile Pages (AMP) and Progressive Web Apps (PWA). It discusses why AMP and PWA are important due to the growing number of mobile users and need for fast loading web content. It provides links to resources on how to build AMP pages and PWA, including sample projects. In the conclusion, it thanks the reader and provides a link to other talks by the author on web development topics.

Unit Testing for Frontend Code at Blibli.comIrfan Maulana

The document discusses unit testing for frontend code at Blibli.com. It introduces the speaker and outlines Blibli.com's frontend framework preference. It then covers the topics of blackbox vs whitebox testing, the unit test tools used like karma and mocha, automating tests on git commits, and establishing a quality gate. It also compares Karma and Jest testing tools. The document proposes moving from Karma to Jest to simplify tooling, adding Avoriaz for UI testing, implementing end-to-end developer tests, and other improvements to ensure better quality delivery.

Programmer In Startup EraIrfan Maulana

This document summarizes a presentation given by Irfan Maulana about opportunities for programmers in the startup era. It discusses how e-commerce and on-demand startups have grown without physical infrastructure by leveraging technology. It notes that most startups are technology-based and require programmers. For new programmers, it recommends learning basic skills, joining communities, doing small projects, and interning if possible. It also encourages programmers to continue upgrading skills through open source contributions and learning from others. The presentation outlines options for programmers to either create their own startups, join startups, or work for large companies.

Bliblidotcom - Evolusi Frontend Development di BliblidotcomIrfan Maulana

Bliblidotcom - Tech In Asia PDC 2017 TakeawayIrfan Maulana

Angular - The Return of The KingIrfan Maulana

- Irfan Maulana presented about Angular. He has over 2 years experience with AngularJS and is now learning Angular. - AngularJS was previously the dominant framework (king) but became outdated. Angular has replaced AngularJS as the new framework and king. - Angular is the son of AngularJS and is now ready to take over and lead where AngularJS left off. It uses TypeScript for added safety and RxJS for reactive programming. - Angular comes with a CLI that makes it easy to generate projects, components, and more without configuration headaches. Core parts include modules, components, services, pipes, and routing.

How to Become Rockstar ProgrammerIrfan Maulana

The document introduces Irfan Maulana, a software development engineer who previously worked as a Java developer. It provides details on his education background and websites. The rest of the document provides tips on how to become a well-known programmer, such as writing about your work, sharing code, being active in communities, public speaking, continuous learning, respecting others, and passion.

Bliblidotcom - AngularJS IntroductionIrfan Maulana

This document introduces AngularJS version 1.x and provides an overview of its key concepts and features. It discusses AngularJS's MVC architecture including models, views, and controllers. It then provides examples of using AngularJS for data binding, making requests to retrieve data, creating services, and routing. The examples demonstrate basic usage and capabilities of AngularJS. The document concludes by proposing an exercise to create a CRUD application using the AngularJS framework and interacting with a JSON placeholder API.

Php Indonesia x Bliblidotcom - Architecting Scalable CSSIrfan Maulana

This document summarizes Irfan Maulana's presentation on architecting scalable CSS at his company Blibli.com. It discusses how they moved to using Sass and implemented the BEM methodology to modularize their CSS and make it more maintainable as their codebase grew. Some challenges included building out their own BEM libraries and integrating it with JavaScript frameworks, but overall it improved collaboration and allowed safe refactoring of CSS without side effects. The presentation concludes that scalable CSS is achievable through preprocessors like Sass and strict conventions like BEM.

Journey To The Front End World - Part3 - The MachineIrfan Maulana

This document is a summary of part 3 of a journey to the front end world. It provides an introduction to JavaScript, including what it is, its uses, data types, operators, conditional statements, loops, functions, and scope. It also discusses ECMAScript, the DOM tree, developer tools, and code conventions. Hands-on examples are provided to add CRUD interactions with local storage. References for further learning are included, and contact information is provided for the author.

Bliblidotcom - SASS IntroductionIrfan Maulana

Journey To The Front End World - Part2 - The CosmeticIrfan Maulana

Journey To The Front End World - Part1 - The SkeletonIrfan Maulana

The document provides an introduction to HTML for beginners. It explains that HTML is the skeleton for websites and defines common HTML elements like headings, paragraphs, lists, forms, and inputs. It also discusses HTML tags, attributes, and basic page structure using tags like <html>, <head>, <body>, <div>, and <nav>. The document encourages new developers to learn HTML fundamentals and not feel discouraged if it takes practice to understand basic concepts. It includes the presenter's contact information for any additional questions.

Bliblidotcom - Reintroduction BEM CSSIrfan Maulana

BEM is a naming convention that makes front-end code easier to understand and maintain. It stands for Block, Element, Modifier. A Block is a standalone component, an Element is a dependent part of a Block, and a Modifier changes the appearance or behavior of a Block or Element. BEM has simple rules for naming classes with prefixes and separators to identify each part. Applying BEM helps code be modular, flexible, and support partial loading. It also works well with component-based frameworks like React and Vue. Real-life examples from Blibli Travel and a sample framework demonstrate how to implement BEM.

PHP Indonesia - Understanding UI UX from Developer SideIrfan Maulana

This document discusses the importance of developers understanding user interface (UI) and user experience (UX). It defines UI as everything a user interacts with on a device, while UX refers to a person's entire experience using a product or service. The UI/UX process is outlined, including interviews, prototyping, and measuring outcomes. The document suggests developers can support the process by collaborating early, ensuring clear specifications, deploying frequently for feedback, optimizing for speed, and allowing negotiation between designers and developers.

JakartaJS - How I Learn Javascript From BasicIrfan Maulana

The document shares Irfan Maulana's experience learning JavaScript from a background in Java development. It outlines some of the challenges he faced including lack of consistency and debugging skills. It provides recommendations for learning JavaScript basics through resources like JavaScript for Cats and You Don't Know JS. Irfan emphasizes the importance of practicing by building projects, asking questions on forums, and learning frameworks to strengthen JavaScript skills.

PHP Indonesia - Nodejs Web DevelopmentIrfan Maulana

This document provides an introduction to Node.js web development. It discusses Node.js basics including its asynchronous, non-blocking architecture. It also covers building a simple web app with Express, MongoDB, and Jade. Tools for bundling assets like Grunt and unit testing with Mocha are described. Sample code demonstrates basic routing, database queries, templating, and unit tests. Contact information and GitHub repos are provided to learn more.

[Blibli Brown Bag] Nodejs - The Other Side of JavascriptIrfan Maulana

This document provides an overview of Node.js including what it is, its key features, popular modules, when to use it and when not to use it. Node.js is a JavaScript runtime built on Chrome's V8 engine that allows JavaScript to be used on the server-side. It offers lightweight servers, near real-time speed, non-blocking I/O with event loops, large npm module ecosystem and support for isomorphic JavaScript. Popular Node.js uses include chat applications, APIs, monitoring dashboards, and server-side web applications. The document then discusses building web applications with Node.js including using Express, Mongoose, Jade and testing with Mocha.

Create Rest API in Nodejs Irfan Maulana

This document discusses how to create a REST API in Node.js using the Express framework and Mongoose ORM for connecting to MongoDB. It begins with an introduction and background on REST APIs and the technologies used. It then walks through setting up dependencies, creating basic Express routes, connecting to MongoDB with Mongoose, defining a schema and model, and using the model for CRUD operations. The document ends with instructions on testing API endpoints in Postman and includes a link to the source code repository.

Irfan Maulana - Career JourneyIrfan Maulana

Irfan Maulana is a software development engineer at PT. GDN (Blibli.com) specializing in web front end development. He has over 7 years of experience in software development, previously working at PT. SML Technologies as a Java and web developer and PT. Dunkindo Lestari as quality control. His skillset includes front end technologies like HTML, CSS, JavaScript, AngularJS, and Sencha ExtJS as well as back end skills in Java, PHP, and NodeJs and databases like MySQL and MongoDB.

Modern Web - an IntroductionIrfan Maulana

Unit Testing for Frontend Code at Blibli.comIrfan Maulana

Programmer In Startup EraIrfan Maulana

Bliblidotcom - Evolusi Frontend Development di BliblidotcomIrfan Maulana

Bliblidotcom - Tech In Asia PDC 2017 TakeawayIrfan Maulana

Angular - The Return of The KingIrfan Maulana

How to Become Rockstar ProgrammerIrfan Maulana

Bliblidotcom - AngularJS IntroductionIrfan Maulana

Php Indonesia x Bliblidotcom - Architecting Scalable CSSIrfan Maulana

Journey To The Front End World - Part3 - The MachineIrfan Maulana

Bliblidotcom - SASS IntroductionIrfan Maulana

Journey To The Front End World - Part2 - The CosmeticIrfan Maulana

Journey To The Front End World - Part1 - The SkeletonIrfan Maulana

Bliblidotcom - Reintroduction BEM CSSIrfan Maulana

PHP Indonesia - Understanding UI UX from Developer SideIrfan Maulana

JakartaJS - How I Learn Javascript From BasicIrfan Maulana

PHP Indonesia - Nodejs Web DevelopmentIrfan Maulana

[Blibli Brown Bag] Nodejs - The Other Side of JavascriptIrfan Maulana

Create Rest API in Nodejs Irfan Maulana

Irfan Maulana - Career JourneyIrfan Maulana

Recently uploaded (20)

Raish Khanji GTU 8th sem Internship Report.pdfRaishKhanji

This report details the practical experiences gained during an internship at Indo German Tool Room, Ahmedabad. The internship provided hands-on training in various manufacturing technologies, encompassing both conventional and advanced techniques. Significant emphasis was placed on machining processes, including operation and fundamental understanding of lathe and milling machines. Furthermore, the internship incorporated modern welding technology, notably through the application of an Augmented Reality (AR) simulator, offering a safe and effective environment for skill development. Exposure to industrial automation was achieved through practical exercises in Programmable Logic Controllers (PLCs) using Siemens TIA software and direct operation of industrial robots utilizing teach pendants. The principles and practical aspects of Computer Numerical Control (CNC) technology were also explored. Complementing these manufacturing processes, the internship included extensive application of SolidWorks software for design and modeling tasks. This comprehensive practical training has provided a foundational understanding of key aspects of modern manufacturing and design, enhancing the technical proficiency and readiness for future engineering endeavors.

AI-assisted Software Testing (3-hours tutorial)Vəhid Gəruslu

Reagent dosing (Bredel) presentation.pptxAlejandroOdio

IntroSlides-April-BuildWithAI-VertexAI.pdfLuiz Carneiro

Smart_Storage_Systems_Production_Engineering.pptxrushikeshnavghare94

railway wheels, descaling after reheating and before forgingJavad Kadkhodapour

International Journal of Distributed and Parallel systems (IJDPS)samueljackson3773

The growth of Internet and other web technologies requires the development of new algorithms and architectures for parallel and distributed computing. International journal of Distributed and parallel systems is a bimonthly open access peer-reviewed journal aims to publish high quality scientific papers arising from original research and development from the international community in the areas of parallel and distributed systems. IJDPS serves as a platform for engineers and researchers to present new ideas and system technology, with an interactive and friendly, but strongly professional atmosphere.

Mathematical foundation machine learning.pdfTalhaShahid49

Degree_of_Automation.pdf for Instrumentation and industrial specialistshreyabhosale19

ADVXAI IN MALWARE ANALYSIS FRAMEWORK: BALANCING EXPLAINABILITY WITH SECURITYijscai

With the increased use of Artificial Intelligence (AI) in malware analysis there is also an increased need to understand the decisions models make when identifying malicious artifacts. Explainable AI (XAI) becomes the answer to interpreting the decision-making process that AI malware analysis models use to determine malicious benign samples to gain trust that in a production environment, the system is able to catch malware. With any cyber innovation brings a new set of challenges and literature soon came out about XAI as a new attack vector. Adversarial XAI (AdvXAI) is a relatively new concept but with AI applications in many sectors, it is crucial to quickly respond to the attack surface that it creates. This paper seeks to conceptualize a theoretical framework focused on addressing AdvXAI in malware analysis in an effort to balance explainability with security. Following this framework, designing a machine with an AI malware detection and analysis model will ensure that it can effectively analyze malware, explain how it came to its decision, and be built securely to avoid adversarial attacks and manipulations. The framework focuses on choosing malware datasets to train the model, choosing the AI model, choosing an XAI technique, implementing AdvXAI defensive measures, and continually evaluating the model. This framework will significantly contribute to automated malware detection and XAI efforts allowing for secure systems that are resilient to adversarial attacks.

Explainable-Artificial-Intelligence-XAI-A-Deep-Dive (1).pptxMahaveerVPandit

DATA-DRIVEN SHOULDER INVERSE KINEMATICS YoungBeom Kim1 , Byung-Ha Park1 , Kwa...charlesdick1345

new ppt artificial intelligence historyyyPianoPianist

Avnet Silica's PCIM 2025 Highlights FlyerWillDavies22

five-year-soluhhhhhhhhhhhhhhhhhtions.pdfAdityaSharma944496

Artificial Intelligence (AI) basics.pptxaditichinar

"Feed Water Heaters in Thermal Power Plants: Types, Working, and Efficiency G...Infopitaara

A feed water heater is a device used in power plants to preheat water before it enters the boiler. It plays a critical role in improving the overall efficiency of the power generation process, especially in thermal power plants. 🔧 Function of a Feed Water Heater: It uses steam extracted from the turbine to preheat the feed water. This reduces the fuel required to convert water into steam in the boiler. It supports Regenerative Rankine Cycle, increasing plant efficiency. 🔍 Types of Feed Water Heaters: Open Feed Water Heater (Direct Contact) Steam and water come into direct contact. Mixing occurs, and heat is transferred directly. Common in low-pressure stages. Closed Feed Water Heater (Surface Type) Steam and water are separated by tubes. Heat is transferred through tube walls. Common in high-pressure systems. ⚙️ Advantages: Improves thermal efficiency. Reduces fuel consumption. Lowers thermal stress on boiler components. Minimizes corrosion by removing dissolved gases.

Data Structures_Introduction to algorithms.pptxRushaliDeshmukh2

Concept of Problem Solving, Introduction to Algorithms, Characteristics of Algorithms, Introduction to Data Structure, Data Structure Classification (Linear and Non-linear, Static and Dynamic, Persistent and Ephemeral data structures), Time complexity and Space complexity, Asymptotic Notation - The Big-O, Omega and Theta notation, Algorithmic upper bounds, lower bounds, Best, Worst and Average case analysis of an Algorithm, Abstract Data Types (ADT)

Lidar for Autonomous Driving, LiDAR Mapping for Driverless Cars.pptxRishavKumar530754

introduction to machine learining for beginersJoydebSheet

Raish Khanji GTU 8th sem Internship Report.pdfRaishKhanji

AI-assisted Software Testing (3-hours tutorial)Vəhid Gəruslu

Reagent dosing (Bredel) presentation.pptxAlejandroOdio

IntroSlides-April-BuildWithAI-VertexAI.pdfLuiz Carneiro

Smart_Storage_Systems_Production_Engineering.pptxrushikeshnavghare94

railway wheels, descaling after reheating and before forgingJavad Kadkhodapour

International Journal of Distributed and Parallel systems (IJDPS)samueljackson3773

Mathematical foundation machine learning.pdfTalhaShahid49

Degree_of_Automation.pdf for Instrumentation and industrial specialistshreyabhosale19

ADVXAI IN MALWARE ANALYSIS FRAMEWORK: BALANCING EXPLAINABILITY WITH SECURITYijscai

Explainable-Artificial-Intelligence-XAI-A-Deep-Dive (1).pptxMahaveerVPandit

DATA-DRIVEN SHOULDER INVERSE KINEMATICS YoungBeom Kim1 , Byung-Ha Park1 , Kwa...charlesdick1345

new ppt artificial intelligence historyyyPianoPianist

Avnet Silica's PCIM 2025 Highlights FlyerWillDavies22

five-year-soluhhhhhhhhhhhhhhhhhtions.pdfAdityaSharma944496

Artificial Intelligence (AI) basics.pptxaditichinar

"Feed Water Heaters in Thermal Power Plants: Types, Working, and Efficiency G...Infopitaara

Data Structures_Introduction to algorithms.pptxRushaliDeshmukh2

Lidar for Autonomous Driving, LiDAR Mapping for Driverless Cars.pptxRishavKumar530754

introduction to machine learining for beginersJoydebSheet

Bliblidotcom - AMP And PWA

1. Google Mobile Web Hackathon AMP x PWA to Fight againts High Bounce Rate and Low Conversion Rate Cindy, Febi, Ifnu, Irfan. July, 7th 2017

2. Who We Are ? • Cindy R Kalensang, Product Manager • Hidayat Febiansyah, Principal Engineer • Ifnu Bima, Development Manager • Irfan Maulana, Sr. System Development Engineer

3. The Problem High Bounce Rate • Mobile App bounce rate is 85% lower than Mobile Web • Desktop bounce rate is 20% lower than Mobile Web Low Conversion Rate • Mobile App conversion rate is 8.7x Mobile Web • Desktop conversion rate is 5.7x Mobile Web Mobile App uninstall rate • One of the main reason that drives customer to uninstall App is due to customer phone storage limitation “Mobile Web generates the highest traffic yet it has the highest bounce rate and lowest bounce rate”

4. The Problem Page load time is the website first impression for the user With the implementation of AMP and PWA altogether We are aiming to provide seamless browsing experience which will lead to engaged users and results in higher conversion rate and more loyal customers

5. The Problem Page load time is the website first impression for the user With the implementation of AMP and PWA altogether We are aiming to provide seamless browsing experience which will lead to engaged users and results in higher conversion rate and more loyal customers

6. AMP Solution • AMP for fast load in first time • AMP give better search result in mobile • AMP for reduce bounce rate

7. AMP Implementation • Product List Page – Search Page – Category Page – Merchant Page – Brand Page • Product Detail Page

8. AMP Tag • Current : amp-analytics amp-img amp-carousel amp-selector amp-social-share amp-sidebar • Next : amp-state amp-bind amp-install- serviceworker amp-iframe amp-list

9. AMP Implementation and Demo • Will be live in next 2 weeks • Done by 3 person, 1 employee (Dita) and 2 interns (Nikolas and Geraldo) • Planning, development and testing ~ 2 months • AMP initative was finalized after attending google mobile conference here on february

10. Category Page (Before x After AMP) NON-AMP AMP

11. Search Result Page (Before x After AMP) NON-AMP AMP

12. Brand Page (Before x After AMP) NON-AMP AMP

13. Brand Page (Before x After AMP) NON-AMP AMP

14. Merchant Page (Before x After AMP) NON-AMP AMP

15. Product Detail (Before x After AMP) NON-AMP AMP

16. PWA Solution • PWA for better engagement • PWA for alternative apps with no install need • PWA give shortcut in homescreen • PWA for caching static resources • PWA for fast load in repeat view

17. Blibli.com Travel (Before x After PWA) NON-PWA PWA

18. Lighthouse Result (Before PWA)

19. Lighthouse Result (After PWA)

20. THANK YOU

Bliblidotcom - AMP And PWA

Recommended

More Related Content

What's hot (20)

Similar to Bliblidotcom - AMP And PWA (20)

More from Irfan Maulana (20)

Recently uploaded (20)

Bliblidotcom - AMP And PWA