front-end engineering concepts

Front-End Engineering

Sameer P KarveApplications Developer

Oracle Financial Services Software Ltd

Presented at the Thakur College of Engineering & Technology (TCET),

Mumbai, INDIA

on 4th February 2014

Duration : 60 mins

What’s on the plate

ConceptsDevelopment

FlowLanguagesFrameworks &

toolsPerformance

tuningSocial APIsKnowledge Bases

Why bother ?Creative satisfactionAbundant scope for innovationWide audienceUser delightTime to marketHandling peak load

Designing for a fragmented worldBrowsersDevicesOSResolutionPitchAspect RatioOrientationBandwidth

1024 x 768800 x 600

1920 x 10801366 x 7201280 x 1024

4:3 16:9 Retina display

Aspects of developmentIndustry standards & best

practicesDesign patterns

◦Flyout menus, auto-suggest box◦Infinite list, carousel, flat UI

InternationalizationLocalizationSecurity

Languages

Browser coding Server coding

JSP (Java + EL + JSTL)

JSF

XML + XSL

Development flow

Wireframe

Sketch

Graphic Design

Mock

Working prototype

End product

Architecture

Left Brain ConceptsData-driven, OO, MVCGraceful degradationProgressive enhancementBrowser detectionFeature detectionFluid layoutsMobile first

Right Brain ConceptsSimplicityIntuitivenessUsabilityConsistencyAestheticsResponsiveness

Frameworks – 1

JS onlyCSS only

JS + CSS

Frameworks - 2Why do we need frameworks ?How to choose the right mix ?LicensingSecuritySupport

Online ToolsPixlr ExpressCodepen

PerformanceWhy performance mattersFactors affecting performanceProfilingPerformance improvement

◦Reducing HTTP requests◦Caching◦Content server

Web APIsFacebook APITwitter APIGoogle Maps API

Knowledge Bases

Stay up to dateFollow design trendsFollow draft specificationsLook out for new frameworksHone your skills through practiceStandards compliant coding

How to take this further ?1. View this presentation again

.net/sameerpkarve

2. Find useful links here

.com/bundles/o_jcsmir7qh/n

3. Research on your own

4. Contact Mesameer@karve.com