The presentation discusses various aspects and concepts of front-end engineering, with a view to encourage the audience to take up front-end-development

1. Front-End Engineering
Presented at the Thakur College of Engineering & Technology (TCET),
Mumbai, INDIA
on 4th February 2014
Duration : 60 mins
Sameer P Karve
Applications Developer
Oracle Financial Services Software Ltd

2. What’s on the plate
Concepts
 Development Flow
 Languages
 Frameworks & tools
 Performance tuning
 Social APIs
 Knowledge Bases


3. Why bother ?
Creative satisfaction
 Abundant scope for innovation
 Wide audience
 User delight
 Time to market
 Handling peak load


4. Designing for a fragmented world
Browsers
 Devices
 OS
 Resolution
 Pitch
 Aspect Ratio
 Orientation
800 x 600
1024 x 768
 Bandwidth 1280 x 1024 1366 x 720 1920 x 1080

4:3
16:9
Retina display

5. Aspects of development
Industry standards & best practices
 Design patterns

◦ Flyout menus, auto-suggest box
◦ Infinite list, carousel, flat UI
Internationalization
 Localization
 Security


6. Languages
Browser coding
Server coding
JSP (Java + EL + JSTL)
JSF
XML + XSL

7. Development flow
Sketch
Wireframe
Graphic
Design
Mock
Architecture
Working
prototype
End product

8. Left Brain Concepts
Data-driven, OO, MVC
 Graceful degradation
 Progressive enhancement
 Browser detection
 Feature detection
 Fluid layouts
 Mobile first


9. Right Brain Concepts
Simplicity
 Intuitiveness
 Usability
 Consistency
 Aesthetics
 Responsiveness


10. Frameworks – 1
JS only
CSS
only
JS +
CSS

11. Frameworks - 2
Why do we need frameworks ?
 How to choose the right mix ?
 Licensing
 Security
 Support


12. Online Tools
Pixlr Express
 Codepen


13. Performance
Why performance matters
 Factors affecting performance
 Profiling
 Performance improvement

◦ Reducing HTTP requests
◦ Caching
◦ Content server

14. Web APIs
Facebook API
 Twitter API
 Google Maps API


15. Knowledge Bases

16. Stay up to date
Follow design trends
 Follow draft specifications
 Look out for new frameworks
 Hone your skills through practice
 Standards compliant coding


17. 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 Me
sameer@karve.com