Introduction to Flask

A hands-on introduction to the Flask micro-framework for Python. I gave this presentation at the Portland Python User Group monthly meeting on 9/10/2013.

All the code referenced in the slides is available at https://github.com/miguelgrinberg/Flask-Intro.

Transcript

1. INTRODUCTION TO FLASK MIGUEL GRINBERG @miguelgrinberg miguel.grinberg@gmail.com
2. WHAT IS FLASK? Server-side web micro-framework for Python Very small: ~2100 LOC Well documented Runs on Python 2.6, 2.7 and 3.3 Dependencies: Werkzeug: routing, debugger, WSGI support Jinja2: templating
3. FLASK FEATURES Request dispatcher Template engine Secure cookies User sessions Unit testing For the developer Web server In-browser debugger Reloader
4. FLASK MISSING FEATURES Database access Web form validation User authentication and authorization Email support Caching Administration ... and more REALLY???
5. FLASK IS EXTENSIBLE Designed to be extended with third party packages. Regular Python packages can be used directly. Flask extensions are easy to write and integrate. Extensions are available for most tasks.
6. FLASK IS MODULAR Just install the packages and extensions that you need and nothing more. Your development stack has no cruft!
7. INSTALLING FLASK Linux and Mac users ~ / m y a p p $ v i r t u a l e n v v e n v ~ / m y a p p $ s o u r c e v e n v / b i n / a c t i v a t e ( v e n v ) ~ / m y a p p $ p i p i n s t a l l f l a s k Windows users (*) (*) If you want to experience Unix power on Windows, try . This is not a VM! C : \ m y a p p > v i r t u a l e n v v e n v C : \ m y a p p > v e n v \ s c r i p t s \ a c t i v a t e ( v e n v ) C : \ m y a p p > p i p i n s t a l l f l a s k http://cygwin.org
8. ANATOMY OF A FLASK APPLICATION 1. Initialize and configure application 2. Define routes and view functions 3. Start the development web server f r o m f l a s k i m p o r t F l a s k a p p = F l a s k ( _ _ n a m e _ _ ) @ a p p . r o u t e ( ' / ' ) d e f i n d e x ( ) : r e t u r n ' < h 1 > H e l l o W o r l d ! < / h 1 > ' i f _ _ n a m e _ _ = = ' _ _ m a i n _ _ ' : a p p . r u n ( d e b u g = T r u e )
9. ANATOMY OF A FLASK APPLICATION That's it! ( v e n v ) ~ / h e l l o $ p y t h o n h e l l o . p y * R u n n i n g o n h t t p : / / 1 2 7 . 0 . 0 . 1 : 5 0 0 0 / * R e s t a r t i n g w i t h r e l o a d e r
10. DYNAMIC ROUTES f r o m f l a s k i m p o r t F l a s k a p p = F l a s k ( _ _ n a m e _ _ ) @ a p p . r o u t e ( ' / ' ) d e f i n d e x ( ) : r e t u r n ' < h 1 > H e l l o W o r l d ! < / h 1 > ' @ a p p . r o u t e ( ' / i n d e x / < n a m e > ' ) d e f h e l l o ( n a m e ) : r e t u r n ' < h 1 > H e l l o , % s ! < / h 1 > ' % n a m e i f _ _ n a m e _ _ = = ' _ _ m a i n _ _ ' : a p p . r u n ( d e b u g = T r u e )
11. DYNAMIC ROUTES
12. TEMPLATES f r o m f l a s k i m p o r t F l a s k , r e n d e r _ t e m p l a t e a p p = F l a s k ( _ _ n a m e _ _ ) @ a p p . r o u t e ( ' / ' ) d e f i n d e x ( ) : r e t u r n ' < h 1 > H e l l o W o r l d ! < / h 1 > ' @ a p p . r o u t e ( ' / i n d e x / < n a m e > ' ) d e f h e l l o ( n a m e ) : r e t u r n r e n d e r _ t e m p l a t e ( ' i n d e x . h t m l ' , n a m e = n a m e ) i f _ _ n a m e _ _ = = ' _ _ m a i n _ _ ' : a p p . r u n ( d e b u g = T r u e ) templates/index.html < h 1 > H e l l o , { { n a m e } } ! < / h 1 >
13. TWITTER BOOTSTRAP Install the extension ( v e n v ) ~ / h e l l o $ p i p i n s t a l l f l a s k - b o o t s t r a p
14. TWITTER BOOTSTRAP f r o m f l a s k i m p o r t F l a s k , r e n d e r _ t e m p l a t e f r o m f l a s k . e x t . b o o t s t r a p i m p o r t B o o t s t r a p a p p = F l a s k ( _ _ n a m e _ _ ) b o o t s t r a p = B o o t s t r a p ( a p p ) # . . . @ a p p . r o u t e ( ' / i n d e x / < n a m e > ' ) d e f h e l l o ( n a m e ) : r e t u r n r e n d e r _ t e m p l a t e ( ' i n d e x . h t m l ' , n a m e = n a m e ) i f _ _ n a m e _ _ = = ' _ _ m a i n _ _ ' : a p p . r u n ( d e b u g = T r u e ) templates/index.html { % e x t e n d s " b o o t s t r a p _ r e s p o n s i v e . h t m l " % } { % b l o c k b o d y _ c o n t e n t % } < d i v c l a s s = " c o n t a i n e r " > < d i v c l a s s = " p a g e - h e a d e r " > < h 1 > H e l l o , { { n a m e } } ! < / h 1 > < / d i v > < / d i v > { % e n d b l o c k % }
15. TWITTER BOOTSTRAP
16. FORMS Install the extension ( v e n v ) ~ / h e l l o $ p i p i n s t a l l f l a s k - w t f
17. FORMS # . . . f r o m f l a s k . e x t . w t f i m p o r t F o r m f r o m w t f o r m s i m p o r t T e x t F i e l d f r o m w t f o r m s . v a l i d a t o r s i m p o r t R e q u i r e d a p p = F l a s k ( _ _ n a m e _ _ ) a p p . c o n f i g [ ' S E C R E T _ K E Y ' ] = ' h a r d t o g u e s s s t r i n g ' b o o t s t r a p = B o o t s t r a p ( a p p ) c l a s s N a m e F o r m ( F o r m ) : n a m e = T e x t F i e l d ( ' W h a t i s y o u r n a m e ? ' , v a l i d a t o r s = [ R e q u i r e d ( ) ] ) @ a p p . r o u t e ( ' / ' , m e t h o d s = [ ' G E T ' , ' P O S T ' ] ) @ a p p . r o u t e ( ' / i n d e x ' , m e t h o d s = [ ' G E T ' , ' P O S T ' ] ) d e f i n d e x ( ) : n a m e = N o n e f o r m = N a m e F o r m ( ) i f f o r m . v a l i d a t e _ o n _ s u b m i t ( ) : n a m e = f o r m . n a m e . d a t a f o r m . n a m e . d a t a = ' ' r e t u r n r e n d e r _ t e m p l a t e ( ' i n d e x . h t m l ' , f o r m = f o r m , n a m e = n a m e ) # . . .
18. FORMS { % e x t e n d s " b o o t s t r a p _ r e s p o n s i v e . h t m l " % } { % i m p o r t " b o o t s t r a p _ w t f . h t m l " a s w t f % } { % b l o c k b o d y _ c o n t e n t % } < d i v c l a s s = " c o n t a i n e r " > < d i v c l a s s = " p a g e - h e a d e r " > { % i f n a m e % } < h 1 > H e l l o , { { n a m e } } ! < / h 1 > { % e n d i f % } < / d i v > { { w t f . q u i c k _ f o r m ( f o r m ) } } < / d i v > { % e n d b l o c k % }
19. FORMS Initial state
20. FORMS After valid input
21. FORMS After invalid input
22. REDIRECTS AND USER SESSIONS f r o m f l a s k i m p o r t F l a s k , r e n d e r _ t e m p l a t e , r e d i r e c t , u r l _ f o r , s e s s i o n # . . . @ a p p . r o u t e ( ' / ' , m e t h o d s = [ ' G E T ' , ' P O S T ' ] ) @ a p p . r o u t e ( ' / i n d e x ' , m e t h o d s = [ ' G E T ' , ' P O S T ' ] ) d e f i n d e x ( ) : f o r m = N a m e F o r m ( ) i f f o r m . v a l i d a t e _ o n _ s u b m i t ( ) : s e s s i o n [ ' n a m e ' ] = f o r m . n a m e . d a t a f o r m . n a m e . d a t a = ' ' r e t u r n r e d i r e c t ( u r l _ f o r ( ' i n d e x ' ) ) r e t u r n r e n d e r _ t e m p l a t e ( ' i n d e x . h t m l ' , f o r m = f o r m , n a m e = s e s s i o n . g e t ( ' n a m e ' ) ) # . . .
23. LARGE APPLICATION STRUCTURE | - [ r o o t f o l d e r ] | - v e n v / V i r t u a l e n v i r o n m e n t | - a p p / A p p l i c a t i o n p a c k a g e | - t e m p l a t e s / T e m p l a t e f i l e s | - s t a t i c / S t a t i c f i l e s | - _ _ i n i t _ _ . p y A p p l i c a t i o n c r e a t i o n | - * . p y R o u t e s , m o d e l s , f o r m s , e t c . | - t e s t s / U n i t t e s t s | - r e q u i r e m e n t s . t x t D e p e n d e n c i e s | - c o n f i g . p y C o n f i g u r a t i o n | - m a n a g e . p y S e r v e r s t a r t u p a n d a d m i n t a s k s
24. BLUEPRINTS Subset of the application stored in a separate Python package Contains any combination of static files, templates and routes Very useful for extensions that attach new behavior to applications
25. BLUEPRINTS | - [ r o o t f o l d e r ] | - v e n v / | - a p p / | - [ b l u e p r i n t ] / B l u e p r i n t p a c k a g e | - t e m p l a t e s / T e m p l a t e f i l e s | - s t a t i c / S t a t i c f i l e s | - _ _ i n i t _ _ . p y B l u e p r i n t i n s t a n c e c r e a t i o n | - * . p y R o u t e s , m o d e l s , f o r m s , e t c . | - t e m p l a t e s / | - s t a t i c / | - _ _ i n i t _ _ . p y A p p l i c a t i o n c r e a t i o n & b l u e p r i n t h o o k u p | - * . p y | - t e s t s / | - r e q u i r e m e n t s . t x t | - c o n f i g . p y | - m a n a g e . p y
26. RESOURCES Sample code from this presentation Official documentation and tutorial Support: mailing list, IRC channel Mega-Tutorial, RESTful API articles and more Extensions Official registry at Other good places to search: github, PyPI, Google Nice collection of questions with answers Ask your own! http://github.com/miguelgrinberg/Flask-Intro http://flask.pocoo.org http://blog.miguelgrinberg.com/category/Flask http://flask.pocoo.org/extensions/ http://stackoverflow/questions/tagged/flask
27. THANKS! Feedback, questions, etc: @miguelgrinberg miguel.grinberg@gmail.com