Upgrade to Pro — share decks privately, control downloads, hide ads and more …

F2E - The Keystone of Web

Aaron Huang
December 03, 2014

F2E - The Keystone of Web

@ Agilecommunity.tw
(轉成 pdf 的 css 有點跑掉)
slide source: https://github.com/aar0nTw/f2e-keystone

Aaron Huang

December 03, 2014
Tweet

More Decks by Aaron Huang

Other Decks in Programming

Transcript

  1. PSD

  2. a p p / v i e w s ├

    ─ ─ a c c o u n t │ ├ ─ ─ c h a n g e _ p a s s w o r d s │ ├ ─ ─ o r d e r s │ └ ─ ─ p r e f i l l s ├ ─ ─ c o m m o n │ └ ─ ─ a n g u l a r _ m o d ├ ─ ─ d a s h b o a r d │ ├ ─ ─ a p p r o p r i a t i o n s │ ├ ─ ─ a t t e n d a n c e _ b o o k s │ ├ ─ ─ a t t e n d e e _ e m a i l _ n o t i f i c a t i o n s │ ├ ─ ─ a t t e n d e e s │ ├ ─ ─ b u s i n e s s _ i n f o s │ ├ ─ ─ c o m m o n . . . ├ ─ ─ r e g i s t r a t i o n s │ ├ ─ ─ _ b a s e _ i n f o . h t m l . e r b │ ├ ─ ─ _ f a l l b a c k _ a c t i o n s . h t m l . e r b │ ├ ─ ─ n e w . h t m l . e r b │ ├ ─ ─ n e w _ f o r _ c o l l e c t i o n _ e v e n t . h t m l . e r b │ └ ─ ─ s h o w . h t m l . e r b . . . Views Assets a p p / a s s e t s ├ ─ ─ i m a g e s │ . . . │ ├ ─ ─ j a v a s c r i p t s │ ├ ─ ─ a p p l i c a t i o n . j s │ ├ ─ ─ c k e d i t o r │ ├ ─ ─ d a s h b o a r d . . . │ ├ ─ ─ p a g e s . j s . c o f f e e │ ├ ─ ─ p o l y f i l l s │ ├ ─ ─ r e g i s t r a t i o n s │ │ ├ ─ ─ d i r e c t i v e s │ │ ├ ─ ─ h e l p e r s │ │ ├ ─ ─ m o n i t o r s │ │ ├ ─ ─ r e g i s t r a t i o n s _ c o m m o n . j s . c o f f e e │ │ ├ ─ ─ r e g i s t r a t i o n s _ l i b . j s . c o f f e e │ │ ├ ─ ─ r e g i s t r a t i o n s _ n e w . j s . c o f f e e │ │ └ ─ ─ r e g i s t r a t i o n s _ s h o w . j s . c o f f e e │ ├ ─ ─ t e m p l a t e s . j s . e r b │ ├ ─ ─ t h e m e - t a b l e - w r a p p e r . j s │ ├ ─ ─ v e n d o r │ └ ─ ─ w i d g e t s . j s . c o f f e e ├ ─ ─ s t y l e s h e e t s │ ├ ─ ─ _ b a s e . s c s s │ ├ ─ ─ a p p s . s c s s │ ├ ─ ─ b a c k e n d . s c s s . . . │ ├ ─ ─ o r g _ t h e m e . s c s s │ ├ ─ ─ o r g _ t h e m e _ d a r k . s c s s │ ├ ─ ─ p a r t i a l s │ ├ ─ ─ r e g i s t r a t i o n s - p r i n t . s c s s │ ├ ─ ─ r e g i s t r a t i o n s . s c s s │ ├ ─ ─ r e s o u r c e _ f i l e s . s c s s │ ├ ─ ─ t i c k e t - w i d g e t . s c s s
  3. # L a y o u t < b o

    d y c l a s s = " < % = b o d y _ c l a s s % > " > < h e a d e r i d = " h d " > . . . < / b o d y > < % = c o n t e n t _ t a g : d i v , : c l a s s = > g r i d _ c l a s s d o % > < % = r e n d e r : p a r t i a l = > ' s h a r e d / h e a d e r ' % > # v i e w _ h e l p e r . r b m o d u l e V i e w H e l p e r d e f b o d y _ c l a s s l a n g _ t a g = I 1 8 n . l o c a l e . t o _ s b o d y _ c l a s s = [ l a n g _ t a g ] p r e f i x = ' ' s e g m e n t s = c o n t r o l l e r _ p a t h . s p l i t ( ' / ' ) s e g m e n t s . e a c h _ w i t h _ i n d e x d o | s e g m e n t , i | c l a s s _ n a m e = p r e f i x + s e g m e n t b o d y _ c l a s s . p u s h ( c l a s s _ n a m e ) p r e f i x = p r e f i x + s e g m e n t + ' - ' e n d b o d y _ c l a s s . p u s h ( p r e f i x + a c t i o n _ n a m e ) b o d y _ c l a s s = b o d y _ c l a s s . j o i n ( ' ' ) e n d # m o r e . . . e n d
  4. a p p / v i e w s ├

    ─ ─ a c t i v i t i e s │ └ ─ ─ i n d e x . h t m l . e r b ├ ─ ─ a n a l y t i c s │ ├ ─ ─ a c a d e m i c s │ │ ├ ─ ─ _ a c a d e m i c s _ h i s t o r i e s . h t m l . e r b │ │ ├ ─ ─ _ a c a d e m i c s _ h i s t o r y . h t m l . e r b │ │ ├ ─ ─ _ a s i d e _ f i l t e r _ g r a d e . h t m l . e r b │ │ ├ ─ ─ _ a s i d e _ f i l t e r _ p r o g r a m m e . h t m l . e r b │ │ ├ ─ ─ _ a s i d e _ f i l t e r _ s u b j e c t s . h t m l . e r b │ │ ├ ─ ─ _ c l a s s e s . h t m l . e r b │ │ ├ ─ ─ i n d e x . h t m l . e r b │ │ └ ─ ─ s h o w . h t m l . e r b │ ├ ─ ─ a d m i s s i o n s . h t m l . e r b │ ├ ─ ─ d i p l o m a │ │ ├ ─ ─ _ a s i d e _ e x a m _ c a l e n d a r . h t m l . e r b │ │ ├ ─ ─ _ s t u d e n t s _ r e p o r t . h t m l . e r b │ │ └ ─ ─ _ s u b j e c t s _ r e p o r t . h t m l . e r b │ ├ ─ ─ d i p l o m a . h t m l . e r b │ └ ─ ─ e n r o l l m e n t . h t m l . e r b ├ ─ ─ b i l l i n g │ ├ ─ ─ b u l k │ │ ├ ─ ─ _ a s i d e _ f i l t e r _ f e e . h t m l . e r b │ │ ├ ─ ─ _ a s i d e _ f i l t e r _ g r a d e . h t m l . e r b │ │ └ ─ ─ _ b i l l i n g _ t e r m i n a l . h t m l . e r b │ └ ─ ─ b u l k . h t m l . e r b ├ ─ ─ c o m m e n t s │ ├ ─ ─ _ a s i d e _ p a r t i c i p a n t s . h t m l . e r b │ ├ ─ ─ _ f o r m . h t m l . e r b │ ├ ─ ─ _ l i s t . h t m l . e r b │ ├ ─ ─ e d i t . h t m l . e r b │ └ ─ ─ i n d e x . h t m l . e r b ├ ─ ─ c o n t a c t _ r e c o r d i n g s │ ├ ─ ─ _ s u b j e c t . h t m l . e r b │ └ ─ ─ s h o w . h t m l . e r b ├ ─ ─ c o n t a c t s │ ├ ─ ─ f a m i l i e s │ │ ├ ─ ─ _ a s i d e _ a c t i o n s . h t m l . e r b │ │ ├ ─ ─ _ a s i d e _ d e l e t e _ f a m i l y . h t m l . e r b │ │ ├ ─ ─ _ a s i d e _ e d i t _ p a r e n t s . h t m l . e r b │ │ ├ ─ ─ _ a s i d e _ r e s e n d _ w e l c o m e _ e m a i l . h t m l . e r b │ │ ├ ─ ─ _ c o m m u n i c a t i o n _ p a r t i a l . h t m l . e r b Views Assets a p p / a s s e t s / j a v a s c r i p t s ├ ─ ─ a n a l y t i c s │ ├ ─ ─ a c a d e m i c s │ │ └ ─ ─ _ a c a d e m i c s _ h i s t o r i e s . j s . c o f f e e │ └ ─ ─ i n d e x . j s . c o f f e e ├ ─ ─ a p p l i c a t i o n . j s ├ ─ ─ b i l l i n g │ ├ ─ ─ b u l k │ │ └ ─ ─ _ b i l l i n g _ t e r m i n a l . j s . c o f f e e │ └ ─ ─ i n d e x . j s . c o f f e e ├ ─ ─ c o m m e n t s │ ├ ─ ─ _ a s i d e _ p a r t i c i p a n t s . j s . c o f f e e │ └ ─ ─ i n d e x . j s . c o f f e e ├ ─ ─ c o n t a c t _ r e c o r d i n g s │ ├ ─ ─ _ s u b j e c t . j s . c o f f e e │ └ ─ ─ s h o w . j s . c o f f e e ├ ─ ─ c o n t a c t s │ ├ ─ ─ f a m i l i e s │ │ ├ ─ ─ _ f a m i l y _ c o n t a c t . j s . c o f f e e │ │ ├ ─ ─ _ m o d _ f a m i l y _ f o r m . j s . c o f f e e │ │ ├ ─ ─ b i l l i n g │ │ ├ ─ ─ e d i t . j s . c o f f e e │ │ └ ─ ─ l i s t . j s . c o f f e e │ ├ ─ ─ i n d e x . j s . c o f f e e │ ├ ─ ─ i n v o i c e s │ │ └ ─ ─ _ i n v o i c e _ s p l i t _ f o r m . j s . c o f f e e │ ├ ─ ─ i n v o i c e s . j s . c o f f e e │ ├ ─ ─ p a r e n t s │ │ └ ─ ─ s h o w . j s . c o f f e e │ ├ ─ ─ s h a r e d │ │ ├ ─ ─ _ a s i d e _ f i l t e r _ g r a d e . j s . c o f f e e │ │ ├ ─ ─ _ a s i d e _ f i l t e r _ s t a t u s . j s . c o f f e e │ │ ├ ─ ─ _ a s i d e _ n o t e s . j s . c o f f e e │ │ ├ ─ ─ _ c o m m u n i c a t i o n _ b e h a v i o r . j s . c o f f e e │ │ ├ ─ ─ _ c o m m u n i c a t i o n _ c a l l . j s . c o f f e e │ │ ├ ─ ─ _ c o m m u n i c a t i o n _ d e f a u l t . j s . c o f f e e │ │ ├ ─ ─ _ c o m m u n i c a t i o n _ e m a i l . j s . c o f f e e │ │ ├ ─ ─ _ c o m m u n i c a t i o n _ f i l e . j s . c o f f e e │ │ ├ ─ ─ _ c o m m u n i c a t i o n _ n o t e . j s . c o f f e e │ │ ├ ─ ─ _ c o m m u n i c a t i o n _ p a r t i a l . j s . c o f f e e │ │ ├ ─ ─ _ m o d _ a c c o u n t s . j s . c o f f e e │ │ ├ ─ ─ _ m o d _ c o n t a c t _ l i s t . j s . c o f f e e . . . a p p / a s s e t s / s t y l e s h e e t s ├ ─ ─ a n a l y t i c s │ ├ ─ ─ a c a d e m i c │ │ ├ ─ ─ _ a c a d e m i c _ h i s t o r i e s . c s s . s a s s │ │ ├ ─ ─ _ a s i d e _ f i l t e r _ s u b j e c t s . c s s . s a s s │ │ └ ─ ─ _ c l a s s e s . c s s . s a s s │ ├ ─ ─ d i p l o m a │ │ ├ ─ ─ _ a s i d e _ e x a m _ c a l e n d a r . c s s . s a s s │ │ ├ ─ ─ _ s t u d e n t s _ r e p o r t . c s s . s a s s │ │ └ ─ ─ _ s u b j e c t s _ r e p o r t . c s s . s a s s │ └ ─ ─ s h a r e d │ └ ─ ─ _ m o d _ d i p l o m a . c s s . s a s s ├ ─ ─ a n a l y t i c s . c s s . s a s s ├ ─ ─ a p p l i c a t i o n . c s s . s a s s ├ ─ ─ b i l l i n g │ └ ─ ─ b u l k │ ├ ─ ─ _ a s i d e _ f i l t e r _ f e e . c s s . s a s s │ └ ─ ─ _ b i l l i n g _ t e r m i n a l . c s s . s a s s ├ ─ ─ b i l l i n g . c s s . s a s s ├ ─ ─ c o m m e n t s │ ├ ─ ─ _ a s i d e _ p a r t i c i p a n t s . c s s . s a s s │ ├ ─ ─ _ c o m m e n t _ f o r m . c s s . s a s s │ ├ ─ ─ _ l i s t . c s s . s a s s │ └ ─ ─ _ t o o l b a r . c s s . s a s s ├ ─ ─ c o m m e n t s . c s s . s a s s ├ ─ ─ c o n t a c t _ r e c o r d i n g s │ └ ─ ─ _ s u b j e c t . c s s . s a s s ├ ─ ─ c o n t a c t _ r e c o r d i n g s . c s s . s a s s ├ ─ ─ c o n t a c t s │ ├ ─ ─ f a m i l i e s │ │ ├ ─ ─ _ a s i d e _ e d i t _ p a r e n t s . c s s . s a s s │ │ ├ ─ ─ _ a s i d e _ r e s e n d _ w e l c o m e _ e m a i l . c s s . s a s s │ │ ├ ─ ─ _ e m e r g e n c y _ c o n t a c t _ f o r m . c s s . s a s s │ │ ├ ─ ─ _ f a m i l y _ c o n t a c t . c s s . s a s s │ │ ├ ─ ─ _ f a m i l y _ f o r m . c s s . s a s s │ │ ├ ─ ─ _ m o d _ f a m i l y _ f o r m . c s s . s a s s │ │ ├ ─ ─ _ p a r e n t s _ i n f o r m a t i o n _ f o r m . c s s . s a s s │ │ └ ─ ─ b i l l i n g │ ├ ─ ─ i n v o i c e s │ │ ├ ─ ─ _ i n v o i c e _ f o r m . c s s . s a s s │ │ ├ ─ ─ _ i n v o i c e _ n a v i g a t i o n . c s s . s a s s │ │ ├ ─ ─ _ i n v o i c e _ s p l i t _ f o r m . c s s . s a s s │ │ └ ─ ─ _ m o d _ i n v o i c e . c s s . s a s s │ ├ ─ ─ i n v o i c e s . c s s . s c s s │ ├ ─ ─ s h a r e d │ │ ├ ─ ─ _ a s i d e _ a d d r e s s . c s s . s a s s . . .
  5. # S t u d n e t f o

    r m d e f i n e ( r e q u i r e , e x p o r t s , m o d u l e ) - > r e q u i r e ' s e l e c t 2 ' r e q u i r e ' u t i l s / i m a g e _ p r e v i e w ' r e q u i r e ' u t i l s / r e m o v e _ i m a g e ' r e q u i r e ' u t i l s / f o r m _ v a l i d a t e ' r e q u i r e ' u t i l s / f i e l d _ c l o n e ' r e q u i r e ' k e y b r i d g e / d a t e _ i n p u t ' $ v i e w = $ ( ' # s t u d e n t - f o r m ' ) # R e t u r n i f n o t f o u n d t h e m a i n c o n t a i n e r . r e t u r n u n l e s s ( $ v i e w . l e n g t h ) $ f o r m = $ v i e w . f i n d ' f o r m ' $ b i r t h _ f i e l d = $ f o r m . f i n d ' # d a t e _ o f _ b i r t h ' $ a g e _ f i e l d = $ f o r m . f i n d ' # a g e ' $ n a t i o n a l i t y _ f i e l d = $ f o r m . f i n d ' # n a t i o n a l i t y - f i e l d , # l a n g u a g e - f i e l d ' # # # # # # # # # # # # # # # # # # # F u n c t i o n s # # # # # # # # # # # # # # # # # # . . . # # # # # # # # # # # # # # # # # # # B i n d i n g # # # # # # # # # # # # # # # # # # . . . # # # # # # # # # # # # # # # # # # # R e n d e r # # # # # # # # # # # # # # # # # # _ u p d a t e A g e m o m e n t ( $ b i r t h _ f i e l d . v a l ( ) ) $ v i e w . f i n d ( ' . s e l e c t 2 ' ) . s e l e c t 2 s e l e c t 2 O p t i o n $ v i e w . f i n d ( ' . f a n c y - s e l e c t ' ) . f a n c y S e l e c t ( ) $ v i e w . f i n d ( ' # s t u d e n t _ y e a r _ g r a d e _ i d ' ) . s e l e c t 2 ( )
  6. End